/**Navbar**/
@media (min-width: 992px) and (max-width: 1100px){
    /**Menú*/
    .navbar {
        background: #FFFFFF 0% 0% no-repeat padding-box!important;
        box-shadow: 0px 3px 5px #8E8E8E29;
        opacity: 1;
        height: 103px;
    }
    .navbar .navbar-brand .savmanagemnet-logo{
        max-width: 210px;
        max-height: 33px;
    }
    .navbar .img-customer{
        text-align: right;
        margin-right: 30%;
    }
    .navbar .img-customer .logo-customer{
        max-width: 100px;
        max-height: 50px;
    }
    .d-flex{
        width: 20%;
        text-align: right;
        margin-right: -4%;
    }
    .d-flex .close-section{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #646464;
        opacity: 1;
        border-radius: 10px;
        padding: 6px 13px 6px 13px;
        text-decoration: none!important;
        margin-top: 6px;
        text-align: center;
        font: normal normal 600 16px/20px 'Source Sans Pro';
        color: #4E4E4E;
    }
    .d-flex .close-section:hover{
        background: #E8E8E8 0% 0% no-repeat padding-box;
        border: 1px solid #646464;
        opacity: 1;
        border-radius: 10px;
        padding: 6px 13px 6px 13px;
        text-decoration: none!important;
        margin-top: 6px;
        text-align: center;
        font: normal normal 600 16px/20px 'Source Sans Pro';
        color: #4E4E4E;
    }
    .navbar .vl{
        border-left: 1px solid #CCCCCC;
        height: 40px;
        position: absolute;
        left: 81%;
        top: 35%;
    }

    /**Buscar*/

    .task-monitor-search{
        margin-top: 30px;
    }
    .task-monitor-search .form-control{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #C4C4C4!important;
        border-radius: 5px!important;
        color: #AAAAAA!important;
        opacity: 1;
        margin-left: 3%;
        margin-right: 4%;
        padding: 1.3em 2em 1.3em 2em;
    }
    .task-monitor-search>input:focus {
        outline:none !important;
        outline-width: 0 !important;
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        border: 1px solid #C4C4C4;
    }

    /**Resultados y actualizar*/
    .help-block{
        text-align: left;
        font: normal normal normal 20px/27px "Source Sans Pro";
        letter-spacing: 0px;
        color: #707070!important;
        opacity: 1;
        margin-left: 2.5%;
    }
    .number{
        margin-top: -1.7em;
        text-align: center;
        color: #FFFFFF;
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0;
        padding: 2px 6px 2px 6px;
    }

    #button_filter{
        background: #3F62A8 0% 0% no-repeat padding-box!important;
        border-radius: 5px;
        padding: 8px 15px 8px 15px!important;
        text-decoration: none!important;
        border: none!important;
        text-align: center;
        font: normal normal normal 12px/18px 'Source Sans Pro'!important;
        color: #FFFFFF!important;
        margin-right: 1em;
        margin-top: 0.5em;
        margin-bottom: 0.5em;
    }
    #button_filter:hover{
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 3s; /* don't forget to set a duration! */
    }
    #filter-panel{
        height: auto;
        position: absolute;
        width: 99.25%;
        z-index: 99;
        margin-top: -25px;
        margin-left: 1%;
        padding-right: 2.7em;
        padding-top: 25px;
    }
    .filter-panel-body{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        box-shadow: 0px 4px 6px #51515129;
        border-radius: 5px;
    }
    .filter-panel-body:before{
        content: "";
        position: absolute;
        top: -11.5px;
        right: 11.5em;
        width: 0;
        height: 0;
        border-width: 0 35px 35px;
        border-style: solid;
        border-color: transparent transparent #FFFFFF;
    }
    .filter-panel-body .dropdown-menu{
        border: transparent!important;
        background: #FFFFFF 0% 0% no-repeat padding-box!important;
        box-shadow: 0px 4px 6px #51515129!important;
    }
    .filter-panel-body .states-title{
        margin-left: 2.5em;
        padding-top: 2em;
    }
    .filter-panel-body .states-title>h1{
        text-align: left;
        font: normal normal 600 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
    }
    .filter-panel-body .filter-states{
        margin-top: 1.7em;
    }
    .filter-panel-body .filter-states .state_checkbox{
        margin-left: 2.5em;
    }

    .filter-panel-body>hr {
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
        border: 0;
        border-top: 1px solid #f3f2f2 !important;
        width: 95%;
    }

    .filter-panel-body .date_title{
        margin-left: 2.5em;
        margin-bottom: 1em;
    }
    .filter-panel-body .date_title>h1{
        text-align: left;
        font: normal normal 600 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
    }
    .filter-panel-body .separator{
        text-align: left;
        font: normal normal normal 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
        margin-top: 0.3em;
        margin-left: -9.3em;
    }
    .filter-panel-body .start_date{
        text-align: left;
        font: normal normal normal 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
        border: 2px solid #D2D2D2;
        border-radius: 5px;
        width: 188px;
        height: 46px;
        margin-left: 1.5em;
    }

    .filter-panel-body .icon-start-at{
        margin-top: -2.9em;
        margin-left: 10.9em;
        border: none!important;
        background: none!important;
    }
    .filter-panel-body .end_date{
        text-align: left;
        font: normal normal normal 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
        border: 2px solid #D2D2D2;
        border-radius: 5px;
        width: 188px;
        height: 46px;
        margin-top: 3em;
        margin-left: -1.2em;
    }
    .filter-panel-body .icon-end-at{
        margin-top: -2.9em;
        margin-left: 7.5em;
        border: none!important;
        background: none!important;
    }
    .filter-panel-body .priority-title{
        margin-bottom: 1em;
    }
    .filter-panel-body .priority-title>h1{
        text-align: left;
        font: normal normal 600 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
    }

    .filter-panel-body .clean-filters{
        margin-left: 4.8em;
        padding-top: 0.9em;
    }
    .filter-panel-body .clean-filters .title{
        text-align: left;
        font: normal 600 normal 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #FF3434;
        cursor: pointer;
    }
    .filter-panel-body .clean-filters .title:hover{
        color:  #FF3434!important;
    }
    .filter-panel-body .filter-button{
        text-align: right;
        margin-left: -4.5em;
        margin-bottom: 2em;
        margin-top: 0.3rem;
    }
    .filter-panel-body .filter-button .close-filter{
        text-align: center;
        font: normal normal normal 18px/24px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #3F62A8;
        border: 2px solid #3F62A8;
        border-radius: 5px;
        padding: 8px 10px 8px 10px;
    }
    .filter-panel-body .filter-button .close-filter:hover{
        text-align: center;
        font: normal normal normal 18px/24px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #3F62A8;
        opacity: 1;
        background: #ffffff 0% 0% no-repeat padding-box;
        border: 2px solid #3F62A8;
        border-radius: 5px;
        padding: 8px 10px 8px 10px;
        box-shadow: 0px 0px 5px rgba(108, 108, 108, 0.39);
    }

    .filter-panel-body .filter-button .apply-filter{
        text-align: center;
        font: normal normal normal 18px/24px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #FFFFFF;
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 5px;
        padding: 9px 15px 9px 15px;
        margin-left: 1em;
    }
    .filter-panel-body .filter-button .apply-filter:hover{
        text-align: center;
        letter-spacing: 0px;
        border-radius: 5px;
        padding: 9px 15px 9px 15px;
        background: #3F62A8 0% 0% no-repeat padding-box;
        font: normal normal normal 18px/24px 'Source Sans Pro';
        color: #FFFFFF;
        box-shadow: 0px 0px 6px rgba(108, 108, 108, 0.56);
    }
    .update>a{
        text-align: left;
        font: normal normal 600 12px/18px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070!important;
        opacity: 1;
        margin-right: 1.2em;
    }
    .update>button{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        opacity: 1;
        border-radius: 5px;
        padding: 8px 15px 8px 15px;
        text-decoration: none!important;
        margin-top: 6px;
        text-align: center;
        font: normal normal 600 12px/18px 'Source Sans Pro';
        color: #707070;
    }
    .update>a{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        opacity: 1;
        border-radius: 5px;
        padding: 8px 15px 8px 15px;
        text-decoration: none!important;
        margin-top: 6px;
        text-align: center;
        font: normal normal 600 12px/18px 'Source Sans Pro';
        color: #707070;
    }
    .update>a:hover{
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 3s; /* don't forget to set a duration! */
    }
    /**body table*/
    .header-task-monitor{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        opacity: 1;
    }
    .header-task-monitor .text-center{
        padding: 20px 0px!important;
    }
    .header-task-monitor .customer{
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
        padding: 0px 0px 0px 20px;
    }
    .priority-class-customer-1{
        background: #6594FF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        margin-left: 5%;
        margin-right: 5%;
        padding-top: 2%;
        padding-bottom: 3%;
        text-align: center;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
    }
    .priority-class-customer-2{
        background: #1A3D8F 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        margin-left: 15%;
        margin-right: 15%;
        padding-top: 2%;
        padding-bottom: 3%;
    }
    .priority-class-customer-3{
        background: #757575 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        margin-left: 10%;
        margin-right: 10%;
        padding-top: 2%;
        padding-bottom: 3%;
    }
    .priority-class-customer-4{
        background: #FF6665 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        margin-left: 15%;
        margin-right: 15%;
        padding-top: 2%;
        padding-bottom: 3%;
    }
    .priority-class-customer-5{
        background: #FF3434 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        margin-left: 5%;
        margin-right: 5%;
        padding-top: 2%;
        padding-bottom: 3%;
    }

    .state-class-custom-8{
        background: #FF6D5D 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-2{
        background: #8B8B8B 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-3{
        background: #36B980 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-4{
        background: #1BA198 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-5{
        background: #5D9EFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-6{
        background: #FF5D5D 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-7{
        background: #FFAE36 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-1{
        background: #2D2D2D 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-9{
        background: #F456FF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-10{
        background: #5D7DFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-11{
        background: #685DFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }

    .days-task{
        text-align: center;
        font: normal normal normal 12px/16px Source Sans Pro;
        letter-spacing: 0px;
        color: #FFFFFF;
        opacity: 1;
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 5px;
        margin-left: 8%;
        margin-right: 8%;
        padding-top: 3%;
        padding-bottom: 4%;
    }
    .undo-evaluate {
        text-decoration: none !important;
        text-align: center;
        font: normal normal normal 14px/16px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF !important;
    }
    .undo-button-evaluate {
        background: #FFB114 0% 0% no-repeat padding-box;
        box-shadow: 0px 2px 4px #00000029;
        border-radius: 5px;
        opacity: 1;
        cursor: pointer;
        padding-left: 50px;
    }
    .undo-button-evaluate:hover{
        background: #FFB114 0% 0% no-repeat padding-box;
        box-shadow: 0px 2px 4px #00000029;
        border-radius: 5px;
        opacity: 1;
        cursor: pointer;
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 1s; /* don't forget to set a duration! */
    }
    .evaluate{
        text-decoration: none!important;
        text-align: center;
        font: normal normal normal 14px/16px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF!important;
        opacity: 1;
        padding-left: 13px;
    }
    .button-evaluate{
        background: #7896FB 0% 0% no-repeat padding-box;
        box-shadow: 0px 2px 4px #00000029;
        border-radius: 5px;
        opacity: 1;
    }
    .button-evaluate:hover{
        background: #7896FB 0% 0% no-repeat padding-box;
        box-shadow: 0px 2px 4px #00000029;
        border-radius: 5px;
        opacity: 1;
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 1s; /* don't forget to set a duration! */
    }
    .img-evaluate{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    /**Modal dialog*/
    .modal-dialog .modal-content .modal-body .modal-card{
        box-shadow: 0px 0px 6px #00000029;
        border-radius: 5px;
        opacity: 1;
        width: 320px;
        height: 334px;
        margin-left: 12%;
        margin-top: 3%;
        margin-bottom: 3%;
    }
    .modal-dialog .modal-content .modal-body .two-modal-card{
        box-shadow: 0px 0px 6px #00000029;
        border-radius: 5px;
        opacity: 1;
        width: 320px;
        height: 334px;
        margin-left: 2%;
        margin-top: 3%;
        margin-bottom: 3%;
    }
    .modal-dialog .modal-content .modal-body .modal-card .text-modal-monitor{
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
        padding-left: 7%;
        padding-right: 7%;
    }
    .modal-dialog .modal-content .modal-body .two-modal-card .text-modal-monitor{
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
        padding-left: 7%;
        padding-right: 7%;
    }
    .modal-dialog .modal-content .modal-body .modal-card .text-modal-monitor .bold-text{
        text-align: center;
        font: normal normal 600 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
    }
    .modal-dialog .modal-content .modal-body .two-modal-card .text-modal-monitor .bold-text{
        text-align: center;
        font: normal normal 600 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
    }
    .modal-dialog .modal-content .modal-header .modal-title{
        text-align: left;
        font: normal normal 600 24px/20px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3F62A8;
        opacity: 1;
        margin-top: 0.2em;
        margin-left: -19em;
    }
    .modal-dialog .modal-content .modal-header{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        box-shadow: 0px 1px 5px #5B5B5B29;
        border-radius: 10px 10px 0px 0px;
        opacity: 1;
    }
    .modal-dialog .modal-content .modal-body>p{
        text-align: left;
        font: normal normal normal 20px/25px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
        opacity: 1;
        padding-left: 6%;
        padding-right: 8%;
        margin-top: 1%;
    }
    .modal-dialog .modal-content .modal-footer .cancel-modal-approval{
        text-align: center;
        font: normal normal 600 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3F62A8!important;
        text-shadow:  0px 3px 6px #FFFFFF29;
        opacity: 1;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #3F62A8;
        border-radius: 5px;
        padding: 6px 10px 6px 10px;
    }
    .modal-dialog .modal-content .modal-footer .cancel-modal-approval:hover{
        text-align: center;
        font: normal normal 600 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3F62A8;
        opacity: 1;
        background: #ffffff 0% 0% no-repeat padding-box;
        border: 1px solid #3F62A8;
        border-radius: 5px;
        padding: 6px 10px 6px 10px;
        box-shadow: 0px 0px 5px rgba(108, 108, 108, 0.39);
    }
    .modal-dialog .modal-content .modal-footer .confirm-modal-approval{
        text-align: center;
        letter-spacing: 0px;
        opacity: 1;
        border: 1px solid #3F62A8;
        border-radius: 5px;
        padding: 6px 10px 6px 10px;
        background:  #3F62A8 0% 0% no-repeat padding-box;
        font: normal normal normal 18px/23px "Source Sans Pro";
        color: #FFFFFF;
        text-shadow:  0px 3px 6px #FFFFFF29;
    }
    .modal-dialog .modal-content .modal-footer .confirm-modal-approval:hover{
        text-align: center;
        letter-spacing: 0px;
        opacity: 1;
        border: 1px solid #4168B6FF;
        border-radius: 5px;
        padding: 6px 10px 6px 10px;
        background: #4168b6 0% 0% no-repeat padding-box;
        font: normal normal normal 18px/23px "Source Sans Pro";
        color: #FFFFFF;
        box-shadow: 0px 0px 6px rgba(108, 108, 108, 0.56);
    }
    .modal-dialog .modal-content{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border-radius: 10px;
        opacity: 1;
    }

    .active{
        background: #f4f6f9!important;

    }

    .modal-dialog .modal-content .modal-body .title-one{
        text-align: left;
        font: normal normal normal 20px/25px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
        margin-top: 5%;
        margin-left: 23%;
    }
    .modal-dialog .modal-content .modal-body .title-two{
        text-align: left;
        font: italic normal 600 20px/25px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #484848;
        margin-left: 23%;
    }
    .modal-dialog .modal-content .modal-body .body-one{
        margin-top: 4%;
        background: #E8EDFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        text-align: left;
        font: normal normal bold 16px/20px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #212E58;
        opacity: 1;
        margin-right: 19.5em;
        padding-left: 2%;
        margin-left: 23%;
    }
    .modal-dialog .modal-content .modal-body .body-two{
        text-align: left;
        font: normal normal normal 16px/20px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #484848;
        margin-top: 3%;
        margin-right: 5%;
        margin-left: 23%;
    }

    .modal-dialog .modal-content .modal-body .body-three{
        text-align: left;
        font: normal normal 600 16px/20px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
        margin-right: 5%;
    }
    .modal-dialog .modal-content .modal-body .body-four{
        text-align: left;
        font: normal normal normal 16px/20px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #484848;
        margin-top: 2%;
        margin-right: 5%;
        margin-left: 23%;
    }

    /**table*/
    .accent-fuchsia .page-item.active .page-link {
        background-color: #FFFFFF!important;
        border: none!important;
        color: black;!important;
    }
    .accent-fuchsia .page-item{
        margin: 0.2em;
    }
    .accent-fuchsia .page-item .page-link {
        background-color: #ECECEC!important;
        border: none!important;
        color: black;!important;
        border-radius: 100%;
        width: 100%;
    }
    .accent-fuchsia .page-item .page-link:hover {
        background-color: #E2E2E2!important;
        border: none!important;
        color: black;!important;
        border-radius: 100%;
        width: 100%;
    }
    table, tr, td{
        border:none!important;
    }
    table, thead, th{
        border: none!important;
        vertical-align: middle!important;
    }


    /**Modal secciones*/
    .three-modal-title{
        text-align: left;
        font: normal normal 600 16px/20px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3F62A8!important;
        opacity: 1;
        margin-left:4%;
        margin-top: -1em;
    }
    .form-control-8{
        background: #FF6D5D 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 220px;
        height: 35px;
        text-align: center;
        font: normal normal normal 14px/16px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 53%;
        margin-top: -2.5em
    }
    .form-control-2{
        background: #8B8B8B 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 120px;
        height: 35px;
        text-align: center;
        font: normal normal normal 14px/16px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 64%;
        margin-top: -2.2em
    }
    .form-control-3{
        background: #36B980 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 120px;
        height: 35px;
        text-align: center;
        font: normal normal normal 14px/16px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 64%;
        margin-top: -2.2em
    }
    .form-control-4{
        background: #1BA198 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 235px;
        height: 35px;
        text-align: center;
        font: normal normal normal 14px/16px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 51%;
        margin-top: -2.2em
    }
    .form-control-5{
        background: #5D9EFF 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 160px;
        height: 35px;
        text-align: center;
        font: normal normal normal 14px/16px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 60%;
        margin-top: -2.2em
    }
    .form-control-6{
        background: #FF5D5D 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 180px;
        height: 35px;
        text-align: center;
        font: normal normal normal 14px/16px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 57%;
        margin-top: -2.2em
    }
    .form-control-7{
        background: #FFAE36 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 230px;
        height: 35px;
        text-align: center;
        font: normal normal normal 14px/16px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 52%;
        margin-top: -2.2em
    }
    .form-control-1{
        background: #2D2D2D 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 190px;
        height: 35px;
        text-align: center;
        font: normal normal normal 14px/16px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 56%;
        margin-top: -2.2em
    }
    .form-control-9{
        background: #F456FF 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 250px;
        height: 35px;
        text-align: center;
        font: normal normal normal 14px/16px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 49.5%;
        margin-top: -2.2em
    }
    .form-control-10{
        background: #5D7DFF 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 140px;
        height: 35px;
        text-align: center;
        font: normal normal normal 14px/16px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 62%;
        margin-top: -2.2em
    }
    .form-control-11{
        background: #685DFF 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 90px;
        height: 35px;
        text-align: center;
        font: normal normal normal 14px/16px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 68%;
        margin-top: -2.2em
    }
    .modal-body{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        box-shadow: 0px 1px 5px #5B5B5B29;
        border-radius: 10px 10px 0px 0px;
        opacity: 1;
        padding-bottom: 2%;
    }
    .modal-text-section .section{
        border-right: 1px solid #D2D2D2;
        transition: all 0.5s;
        padding-right: 16px;
        word-break: break-all;
    }
    .modal-text-section .section .section-title{
        text-align: left;
        font: normal normal 600 18px/20px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #484848;
        opacity: 1;
        margin-top: 5%;
        margin-left: 10%;
        margin-bottom: 2%
    }
    .modal-text-section .vl{
        border: 1px solid #D2D2D2;
        height: 894px;
        position: absolute;
        left: 94%;
        margin-left: -3px;
        top: 0;
    }
    .modal-text-section .line{
        border: 1px solid #D2D2D2;
        height: 894px;
        position: absolute;
        left: 99%;
        margin-left: -3px;
        top: 0;
    }
    .modal-text-section .date{
        text-align: left;
        font: normal normal normal 16px/18px "Source Sans Pro";
        letter-spacing: 0px;
        color: #4A4A4A;
        opacity: 1;
        margin-left: 4%;
        margin-top: 4%;
    }
    .modal-text-section .section-evaluate{
        background: #7896FB 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        width: 120px;
        height: 35px;
        padding-top: 5px;
        margin-left: 67%;
        margin-top: -1em;
        text-align: center;
    }
    .modal-text-section .section-evaluate:hover{
        background: #7896FB 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        width: 120px;
        height: 35px;
        padding-top: 5px;
        margin-left: 67%;
        margin-top: -1em;
        text-align: center;
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 1s; /* don't forget to set a duration! */
    }
    .modal-text-section .section-undo-evaluate{
        background: #FFB114 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        width: 180px;
        height: 35px;
        padding-top: 6px;
        margin-left: 59%;
        margin-top: -1em;
        text-align: center;
    }
    .modal-text-section .sections-evaluate{
        text-align: center;
        font: normal normal normal 16px/18px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF!important;
        opacity: 1;
        text-decoration: none!important;
    }
    .modal-text-section .section-undo-evaluate:hover{
        background: #FFB114 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        width: 180px;
        height: 35px;
        padding-top: 6px;
        margin-left: 59%;
        margin-top: -1em;
        text-align: center;
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 1s; /* don't forget to set a duration! */
    }
    .modal-text-section .valign-middle-img{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        width: 120px;
        height: 35px;
        padding-top: 5px;
        margin-left: 73%;
        margin-top: -3em;
    }
    .modal-text-section .option_{
        margin-bottom: 0.6em;
        margin-top: 0.6em;
        margin-right: 5%;
    }
    .modal-text-section .option_:hover{
        background: #F1F1F1;
    }
    .modal-text-section .active-button{
        background: #F1F1F1;
    }
    .modal-text-section .dropdown-item:active {
        color: #fff;
        text-decoration: none;
        background-color: #F1F1F1;
    }

    /**Linea centro*/
    .center_line>div{
        border: 1px solid #D2D2D2;
        opacity: 1;
        margin-right: 4%;
        margin-left: 2%;
    }
    .center_line{
        margin: 25px;
    }
    .modal-text-section .title{
        text-align: left;
        font: normal normal normal 14px/16px "Source Sans Pro";
        letter-spacing: 0px;
        color: #222E58;
        opacity: 1;
        cursor: pointer;
    }
    .modal-text-section .title:hover{
        color: #222E58;
        cursor: pointer;
    }

    /***/
    .dropdown-toggle .title{
        margin-left: 20%;
        background: #FFFFFF;
    }
    .footer{
        text-align: right;
        margin-left: 48em;
        margin-bottom: 1em;
    }
    .footer>button{
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        padding: 10px 20px 10px 20px;
        text-align: center;
        font: normal normal normal 16px/18px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        text-shadow: 0px 3px 6px #FFFFFF29;
        border: 1px solid #4168B6FF;
        box-shadow: 0px 0px 6px transparent;
    }
    .footer>button:hover{
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        padding: 10px 20px 10px 20px;
        text-align: center;
        font: normal normal normal 16px/18px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        text-shadow: 0px 3px 6px #FFFFFF29;
        border: 1px solid #4168B6FF;
        box-shadow: 0px 0px 6px rgba(108, 108, 108, 0.56);
    }
    .footer>button:focus{
        outline:none !important;
        outline-width: 0 !important;
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        border: 1px solid #3F62A8;
    }
    .archive-task-monitor{
        background: #F1F1F1  0% 0% no-repeat padding-box;
        box-shadow: 0px 0px 4px #00000029;
        border-radius: 5px;
        opacity: 1;
        margin-left: 20px;
        text-align: center;
        font: normal normal normal 16px/18px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3E3E3E!important;
        text-shadow:  0px 3px 6px #FFFFFF29;
        border: none!important;
        padding: 5px 12px 5px 12px;
    }
    .comment-task-monitor{
        text-align: left;
        font: normal normal normal 16px/18px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848!important;
    }
    .include-task-monitor{
        text-align: left;
        font: normal normal normal 16px/18px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848!important;
        padding: 2em 2em 2em 2em;
        border-radius: 5px;
        background: #F1F1F1 0% 0% no-repeat padding-box;
        border: 1px solid #E9E9E9;
    }
    .include-task-monitor:hover{
        text-align: left;
        font: normal normal normal 16px/18px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848!important;
        padding: 2em 2em 2em 2em;
        border-radius: 5px;
        background: #F1F1F1 0% 0% no-repeat padding-box;
        box-shadow: 0px 0px 4px rgba(108, 108, 108, 0.39);
        border: 1px solid #E9E9E9;
    }
    nav svg{
        height: 20px;
    }
    nav span{
        text-align: left;
        font: normal normal normal 18px/22px "Source Sans Pro";
        letter-spacing: 0px;
        color: #707070;
        opacity: 1;
    }


    /**Modal*/

    .not-confirm-on-state-change{
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        letter-spacing: 0px;
        color: #FFFFFF;
        text-shadow:  0px 3px 6px #FFFFFF29;
        width: 90px;
        height: 35px;
        border: 1px solid #4168B6FF;
        padding: 6px 10px 6px 10px;
        background: #4168b6 0% 0% no-repeat padding-box;
        font: normal normal normal 18px/23px "Source Sans Pro";
        box-shadow: 0px 0px 6px transparent;
    }
    .not-confirm-on-state-change:hover{
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        letter-spacing: 0px;
        color: #FFFFFF;
        text-shadow:  0px 3px 6px #FFFFFF29;
        width: 90px;
        height: 35px;
        border: 1px solid #4168B6FF;
        padding: 6px 10px 6px 10px;
        background: #4168b6 0% 0% no-repeat padding-box;
        font: normal normal normal 18px/23px "Source Sans Pro";
        box-shadow: 0px 0px 6px rgba(108, 108, 108, 0.56);
    }
    .not-confirm-on-state-change:focus{
        outline:none !important;
        outline-width: 0 !important;
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        border: 1px solid #3F62A8;
    }
    .confirm-on-state-change {
        font: normal normal 600 18px/23px 'Source Sans Pro';
        color: #3F62A8;
        text-shadow:  0px 3px 6px #FFFFFF29;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #3F62A8;
        border-radius: 5px;
        opacity: 1;
        width: 90px;
        height: 35px;
        margin-top: 20px;
        text-align: center;
        padding: 6px 10px 6px 10px;
    }
    .confirm-on-state-change:hover {
        text-shadow:  0px 3px 6px #FFFFFF29;
        border-radius: 5px;
        opacity: 1;
        width: 90px;
        height: 35px;
        margin-top: 20px;
        text-align: center;
        font: normal normal 600 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3F62A8;
        background: #ffffff 0% 0% no-repeat padding-box;
        border: 1px solid #3F62A8;
        padding: 6px 10px 6px 10px;
        box-shadow: 0px 0px 5px rgba(108, 108, 108, 0.39);
    }
    /** Modal de rechazo  **/
    #undoChangeModal .process{
        font: normal normal 600 18px/23px 'Source Sans Pro';
        color: #474747;
        text-shadow:  0px 3px 6px #FFFFFF29;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #464646;
        border-radius: 5px;
        opacity: 1;
        margin-top: 30px;
        text-align: center;
        padding: 5px 2em 5px 2em;
    }
    /** Calificación**/

    #task_monitor_confirmModal .process{
        font: normal normal 600 18px/23px 'Source Sans Pro';
        color: #3F62A8;
        text-shadow:  0px 3px 6px #3F62A8;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #3F62A8;
        border-radius: 5px;
        opacity: 1;
        margin-top: 40px;
        text-align: center;
        padding: 5px 2em 5px 2em;
    }
    /**
      CUSTOM PAGINATOR
     */
    /**Paginación*/

    .page-item{
        background: #ECECEC!important;
    }
    .page-link{
        text-align: center;
        font: normal normal normal 20px/25px "Source Sans Pro";
        letter-spacing: 0px;
        color: #414141!important;
        opacity: 1;
        margin: 0.5em;
        border-radius: 100%!important;
    }

    .current-page{
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 20px!important;
        opacity: 1;
        color: #FFFFFF;
        padding: 1px 8px 1px 8px;
    }
    .custom_paginator .pagination li.page-item.disabled>span{
        background: #E2E2E2!important;
        color: #414141 !important;
    }
    .custom_paginator .pagination li.page-item.active>span,
    .custom_paginator .pagination li.page-item.active>span{
        text-align: center;
        color: #FFFFFF!important;
        border-radius: 100%!important;
        width: 100%;
        background: #3F62A8!important;
    }

    .custom_paginator .pagination li:first-child>button,
    .custom_paginator .pagination li:first-child>span,
    .custom_paginator .pagination li:last-child>button,
    .custom_paginator .pagination li:last-child>span{
        text-align: center;
        color: #fff0f0!important;
        border-radius: 100%!important;
        max-width: 100%;
        background: #3F62A8!important;
        /*width: 2em!important;*/
    }

    .custom_paginator .pagination li:first-child>button:hover,
    .custom_paginator .pagination li:last-child>button:hover{
        text-align: center;
        color: #FFFFFF!important;
        max-width: 100%;
        border-radius: 100%!important;
        background: #3F62A8!important;
    }

    /**Modal de secciones**/
    .modal-header-section .reloj{
        width: 120px;
        height: 35px;
        border: 1px solid #B8B8B8!important;
        background: #FFFFFF!important;
        text-align: center;
        font: normal normal normal 16px/18px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #757575;
        margin-left: 80%;
        margin-top: -2em
    }

    .modal-header-section .type-state{
        text-align: center;
        color: #FFFFFF;
        font: normal normal normal 16px/18px 'Source Sans Pro';
        padding-top: 8px
    }
    .modal-header-section .close{
        margin-top: -2.3em;
        margin-right: -1.5%;
    }


    /**Modal Cerrar*/

    /**Linea centro*/
    .modal-close .modal-close .close-line>div{
        border: 1px solid #D2D2D2;
        opacity: 1;
        margin-right: 10%;
        margin-left: 10%;
    }
    .modal-close .modal-close .close-line{
        margin: 25px;
    }

    /**Modal uno*/
    .option_confirm:hover{
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 1s; /* don't forget to set a duration! */
    }
    .form-control:focus{
        outline:none !important;
        outline-width: 0 !important;
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        border: 1px solid #C4C4C4!important;
    }

    /**table customer*/

    .header-task-monitor  .state-title{
        width: 5%;
        vertical-align: middle;
    }
    .header-task-monitor .state-title .state-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: center;
        font: normal normal normal 14px/16px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor  .customer{
        vertical-align: middle;
    }
    .header-task-monitor  .customer .customer-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: left;
        font: normal normal normal 14px/16px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor  .start-date{
        vertical-align: middle;
    }
    .header-task-monitor .start-date .start-date-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: center;
        font: normal normal normal 14px/16px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor .end-date{
        vertical-align: middle
    }
    .header-task-monitor .end-date .end-date-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: center;
        font: normal normal normal 14px/16px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor .cycle{
        vertical-align: middle
    }
    .header-task-monitor .cycle .task-cycle-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: center;
        font: normal normal normal 14px/16px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor .priority-title{
        vertical-align: middle
    }

    .header-task-monitor .priority-title .priority-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: center;
        font: normal normal normal 12px/14px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor .approval-title{
        vertical-align: middle;
        text-align: center;
        font: normal normal normal 12px/14px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }

    .hover-table{
        background-color: white !important;
    }
    .hover-table:hover{
        background-color: #f4f6f9 !important;
    }

    .edge-of-state{
        background: white;
        position: relative;
        border-radius: 8px;
        vertical-align: middle;
    }
    .edge-of-state .customer-state-of-edge{
        position: absolute;
        left:-1.8em;
        background:white;
        width: 5px;
        height: 25px;
        border-radius: 0 3px 3px 0;
    }
    .name-state{
        text-align: left;
        font: normal normal normal 14px/16px 'Source Sans Pro';
        color: #FFFFFF;
        width: 120px;
        vertical-align: middle!important;
    }
    .table td, .table th {
        padding: 0.75rem;
        vertical-align: middle!important;
        border-top: 1px solid #dee2e6;
    }
    .showTask .name{
        text-align: left;
        font: normal normal normal 14px/16px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #777777;
        opacity: 1;
    }
    .showTask .img-state{
        text-align: left;
        font: normal normal normal 14px/16px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #414141;
        opacity: 1;
    }
    .start-date{
        text-align: center;
        font: normal normal normal 14px/16px 'Source Sans Pro';
        color: #414141;
    }
    .date-end{
        text-align: center;
        font: normal normal normal 14px/16px 'Source Sans Pro';
        color: #414141;
    }
}
@media (min-width: 1100px) and (max-width: 1200px){
    /**Menú*/
    .navbar {
        background: #FFFFFF 0% 0% no-repeat padding-box!important;
        box-shadow: 0px 3px 5px #8E8E8E29;
        opacity: 1;
        height: 103px;
    }
    .navbar .navbar-brand .savmanagemnet-logo{
        max-width: 210px;
        max-height: 33px;
    }
    .navbar .img-customer{
        text-align: right;
        margin-right: 15%;
    }
    .navbar .img-customer .logo-customer{
        max-width: 100px;
        max-height: 50px;
    }
    .d-flex{
        width: 20%;
        text-align: right;
        margin-right: -6%;
    }
    .d-flex .close-section{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #646464;
        opacity: 1;
        border-radius: 10px;
        padding: 6px 13px 6px 13px;
        text-decoration: none!important;
        margin-top: 6px;
        text-align: center;
        font: normal normal 600 16px/20px 'Source Sans Pro';
        color: #4E4E4E;
    }
    .d-flex .close-section:hover{
        background: #E8E8E8 0% 0% no-repeat padding-box;
        border: 1px solid #646464;
        opacity: 1;
        border-radius: 10px;
        padding: 6px 13px 6px 13px;
        text-decoration: none!important;
        margin-top: 6px;
        text-align: center;
        font: normal normal 600 16px/20px 'Source Sans Pro';
        color: #4E4E4E;
    }
    .navbar .vl{
        border-left: 1px solid #CCCCCC;
        height: 40px;
        position: absolute;
        left: 83%;
        top: 35%;
    }

    /**Buscar*/

    .task-monitor-search{
        margin-top: 30px;
    }
    .task-monitor-search .form-control{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #C4C4C4!important;
        border-radius: 5px!important;
        color: #AAAAAA!important;
        opacity: 1;
        margin-left: 3%;
        margin-right: 4%;
        padding: 1.3em 2em 1.3em 2em;
    }
    .task-monitor-search>input:focus {
        outline:none !important;
        outline-width: 0 !important;
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        border: 1px solid #C4C4C4;
    }

    /**Resultados y actualizar*/
    .help-block{
        text-align: left;
        font: normal normal normal 20px/27px "Source Sans Pro";
        letter-spacing: 0px;
        color: #707070!important;
        opacity: 1;
        margin-left: 2.5%;
    }
    .number{
        margin-top: -1.7em;
        text-align: center;
        color: #FFFFFF;
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0;
        padding: 2px 6px 2px 6px;
    }

    #button_filter{
        background: #3F62A8 0% 0% no-repeat padding-box!important;
        border-radius: 5px;
        padding: 8px 15px 8px 15px!important;
        text-decoration: none!important;
        border: none!important;
        text-align: center;
        font: normal normal normal 16px/20px 'Source Sans Pro'!important;
        color: #FFFFFF!important;
        margin-right: 1em;
        margin-top: 0.5em;
        margin-bottom: 0.5em;
    }
    #button_filter:hover{
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 3s; /* don't forget to set a duration! */
    }
    #filter-panel{
        height: auto;
        position: absolute;
        width: 99.25%;
        z-index: 99;
        margin-top: -25px;
        margin-left: 1%;
        padding-right: 2.7em;
        padding-top: 25px;
    }
    .filter-panel-body{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        box-shadow: 0px 4px 6px #51515129;
        border-radius: 5px;
    }
    .filter-panel-body:before{
        content: "";
        position: absolute;
        top: -11.5px;
        right: 11.5em;
        width: 0;
        height: 0;
        border-width: 0 35px 35px;
        border-style: solid;
        border-color: transparent transparent #FFFFFF;
    }
    .filter-panel-body .dropdown-menu{
        border: transparent!important;
        background: #FFFFFF 0% 0% no-repeat padding-box!important;
        box-shadow: 0px 4px 6px #51515129!important;
    }
    .filter-panel-body .states-title{
        margin-left: 2.5em;
        padding-top: 2em;
    }
    .filter-panel-body .states-title>h1{
        text-align: left;
        font: normal normal 600 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
    }
    .filter-panel-body .filter-states{
        margin-top: 1.7em;
    }
    .filter-panel-body .filter-states .state_checkbox{
        margin-left: 2.5em;
    }

    .filter-panel-body>hr {
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
        border: 0;
        border-top: 1px solid #f3f2f2 !important;
        width: 95%;
    }

    .filter-panel-body .date_title{
        margin-left: 2.5em;
        margin-bottom: 1em;
    }
    .filter-panel-body .date_title>h1{
        text-align: left;
        font: normal normal 600 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
    }
    .filter-panel-body .separator{
        text-align: left;
        font: normal normal normal 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
        margin-top: 0.3em;
        margin-left: -9.3em;
    }
    .filter-panel-body .start_date{
        text-align: left;
        font: normal normal normal 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
        border: 2px solid #D2D2D2;
        border-radius: 5px;
        width: 188px;
        height: 46px;
        margin-left: 1.5em;
    }

    .filter-panel-body .icon-start-at{
        margin-top: -2.9em;
        margin-left: 10.9em;
        border: none!important;
        background: none!important;
    }
    .filter-panel-body .end_date{
        text-align: left;
        font: normal normal normal 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
        border: 2px solid #D2D2D2;
        border-radius: 5px;
        width: 188px;
        height: 46px;
        margin-top: 3em;
        margin-left: -2.4em;
    }
    .filter-panel-body .icon-end-at{
        margin-top: -2.9em;
        margin-left: 6em;
        border: none!important;
        background: none!important;
    }
    .filter-panel-body .priority-title{
        margin-bottom: 1em;
    }
    .filter-panel-body .priority-title>h1{
        text-align: left;
        font: normal normal 600 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
    }

    .filter-panel-body .clean-filters{
        margin-left: 4.8em;
        padding-top: 0.9em;
    }
    .filter-panel-body .clean-filters .title{
        text-align: left;
        font: normal 600 normal 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #FF3434;
        cursor: pointer;
    }
    .filter-panel-body .clean-filters .title:hover{
        color:  #FF3434!important;
    }
    .filter-panel-body .filter-button{
        text-align: right;
        margin-left: -4.5em;
        margin-bottom: 2em;
        margin-top: 0.3rem;
    }
    .filter-panel-body .filter-button .close-filter{
        text-align: center;
        font: normal normal normal 18px/24px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #3F62A8;
        border: 2px solid #3F62A8;
        border-radius: 5px;
        padding: 8px 10px 8px 10px;
    }
    .filter-panel-body .filter-button .close-filter:hover{
        text-align: center;
        font: normal normal normal 18px/24px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #3F62A8;
        opacity: 1;
        background: #ffffff 0% 0% no-repeat padding-box;
        border: 2px solid #3F62A8;
        border-radius: 5px;
        padding: 8px 10px 8px 10px;
        box-shadow: 0px 0px 5px rgba(108, 108, 108, 0.39);
    }

    .filter-panel-body .filter-button .apply-filter{
        text-align: center;
        font: normal normal normal 18px/24px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #FFFFFF;
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 5px;
        padding: 9px 15px 9px 15px;
        margin-left: 1em;
    }
    .filter-panel-body .filter-button .apply-filter:hover{
        text-align: center;
        letter-spacing: 0px;
        border-radius: 5px;
        padding: 9px 15px 9px 15px;
        background: #3F62A8 0% 0% no-repeat padding-box;
        font: normal normal normal 18px/24px 'Source Sans Pro';
        color: #FFFFFF;
        box-shadow: 0px 0px 6px rgba(108, 108, 108, 0.56);
    }
    .update>a{
        text-align: left;
        font: normal normal 600 16px/21px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070!important;
        opacity: 1;
        margin-right: 1.3em;
    }
    .update>button{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        opacity: 1;
        border-radius: 5px;
        padding: 8px 15px 8px 15px;
        text-decoration: none!important;
        margin-top: 6px;
        text-align: center;
        font: normal normal 600 16px/21px 'Source Sans Pro';
        color: #707070;
    }
    .update>a{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        opacity: 1;
        border-radius: 5px;
        padding: 8px 15px 8px 15px;
        text-decoration: none!important;
        margin-top: 6px;
        text-align: center;
        font: normal normal 600 16px/21px 'Source Sans Pro';
        color: #707070;
    }
    .update>a:hover{
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 3s; /* don't forget to set a duration! */
    }
    /**body table*/
    .header-task-monitor{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        opacity: 1;
    }
    .header-task-monitor .text-center{
        padding: 15px 0px!important;
    }
    .header-task-monitor .customer{
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
        padding: 0px 0px 0px 15px;
    }
    .priority-class-customer-1{
        background: #6594FF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        margin-left: 10%;
        margin-right: 10%;
        padding-top: 2%;
        padding-bottom: 3%;
        text-align: center;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
    }
    .priority-class-customer-2{
        background: #1A3D8F 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        margin-left: 20%;
        margin-right: 20%;
        padding-top: 2%;
        padding-bottom: 3%;
    }
    .priority-class-customer-3{
        background: #757575 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        margin-left: 15%;
        margin-right: 15%;
        padding-top: 2%;
        padding-bottom: 3%;
    }
    .priority-class-customer-4{
        background: #FF6665 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        margin-left: 20%;
        margin-right: 20%;
        padding-top: 2%;
        padding-bottom: 3%;
    }
    .priority-class-customer-5{
        background: #FF3434 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        margin-left: 10%;
        margin-right: 10%;
        padding-top: 2%;
        padding-bottom: 3%;
    }

    .state-class-custom-8{
        background: #FF6D5D 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-2{
        background: #8B8B8B 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-3{
        background: #36B980 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-4{
        background: #1BA198 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-5{
        background: #5D9EFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-6{
        background: #FF5D5D 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-7{
        background: #FFAE36 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-1{
        background: #2D2D2D 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-9{
        background: #F456FF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-10{
        background: #5D7DFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-11{
        background: #685DFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }

    .days-task{
        text-align: center;
        font: normal normal normal 14px/18px Source Sans Pro;
        letter-spacing: 0px;
        color: #FFFFFF;
        opacity: 1;
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 5px;
        margin-left: 15%;
        margin-right: 15%;
        padding-top: 3%;
        padding-bottom: 4%;
    }
    .undo-evaluate {
        text-decoration: none !important;
        text-align: center;
        font: normal normal normal 14px/16px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF !important;
    }
    .undo-button-evaluate {
        background: #FFB114 0% 0% no-repeat padding-box;
        box-shadow: 0px 2px 4px #00000029;
        border-radius: 5px;
        opacity: 1;
        cursor: pointer;
        padding-left: 50px;
    }
    .undo-button-evaluate:hover{
        background: #FFB114 0% 0% no-repeat padding-box;
        box-shadow: 0px 2px 4px #00000029;
        border-radius: 5px;
        opacity: 1;
        cursor: pointer;
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 1s; /* don't forget to set a duration! */
    }
    .evaluate{
        text-decoration: none!important;
        text-align: center;
        font: normal normal normal 14px/16px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF!important;
        opacity: 1;
        padding-left: 13px;
    }
    .button-evaluate{
        background: #7896FB 0% 0% no-repeat padding-box;
        box-shadow: 0px 2px 4px #00000029;
        border-radius: 5px;
        opacity: 1;
    }
    .button-evaluate:hover{
        background: #7896FB 0% 0% no-repeat padding-box;
        box-shadow: 0px 2px 4px #00000029;
        border-radius: 5px;
        opacity: 1;
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 1s; /* don't forget to set a duration! */
    }
    .img-evaluate{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    /**Modal dialog*/
    .modal-dialog .modal-content .modal-body .modal-card{
        box-shadow: 0px 0px 6px #00000029;
        border-radius: 5px;
        opacity: 1;
        width: 320px;
        height: 334px;
        margin-left: 12%;
        margin-top: 3%;
        margin-bottom: 3%;
    }
    .modal-dialog .modal-content .modal-body .two-modal-card{
        box-shadow: 0px 0px 6px #00000029;
        border-radius: 5px;
        opacity: 1;
        width: 320px;
        height: 334px;
        margin-left: 2%;
        margin-top: 3%;
        margin-bottom: 3%;
    }
    .modal-dialog .modal-content .modal-body .modal-card .text-modal-monitor{
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
        padding-left: 7%;
        padding-right: 7%;
    }
    .modal-dialog .modal-content .modal-body .two-modal-card .text-modal-monitor{
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
        padding-left: 7%;
        padding-right: 7%;
    }
    .modal-dialog .modal-content .modal-body .modal-card .text-modal-monitor .bold-text{
        text-align: center;
        font: normal normal 600 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
    }
    .modal-dialog .modal-content .modal-body .two-modal-card .text-modal-monitor .bold-text{
        text-align: center;
        font: normal normal 600 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
    }
    .modal-dialog .modal-content .modal-header .modal-title{
        text-align: left;
        font: normal normal 600 24px/20px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3F62A8;
        opacity: 1;
        margin-top: 0.2em;
        margin-left: -19em;
    }
    .modal-dialog .modal-content .modal-header{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        box-shadow: 0px 1px 5px #5B5B5B29;
        border-radius: 10px 10px 0px 0px;
        opacity: 1;
    }
    .modal-dialog .modal-content .modal-body>p{
        text-align: left;
        font: normal normal normal 20px/25px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
        opacity: 1;
        padding-left: 6%;
        padding-right: 8%;
        margin-top: 1%;
    }
    .modal-dialog .modal-content .modal-footer .cancel-modal-approval{
        text-align: center;
        font: normal normal 600 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3F62A8;
        text-shadow:  0px 3px 6px #FFFFFF29;
        opacity: 1;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #3F62A8;
        border-radius: 5px;
        padding: 6px 10px 6px 10px;
    }
    .modal-dialog .modal-content .modal-footer .cancel-modal-approval:hover{
        text-align: center;
        font: normal normal 600 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3F62A8;
        opacity: 1;
        background: #ffffff 0% 0% no-repeat padding-box;
        border: 1px solid #3F62A8;
        border-radius: 5px;
        padding: 6px 10px 6px 10px;
        box-shadow: 0px 0px 5px rgba(108, 108, 108, 0.39);
    }
    .modal-dialog .modal-content .modal-footer .confirm-modal-approval{
        text-align: center;
        letter-spacing: 0px;
        opacity: 1;
        border: 1px solid #3F62A8;
        border-radius: 5px;
        padding: 6px 10px 6px 10px;
        background: #3F62A8 0% 0% no-repeat padding-box;
        font: normal normal normal 18px/23px "Source Sans Pro";
        color: #FFFFFF;
        text-shadow:  0px 3px 6px #FFFFFF29;
    }
    .modal-dialog .modal-content .modal-footer .confirm-modal-approval:hover{
        text-align: center;
        letter-spacing: 0px;
        opacity: 1;
        border: 1px solid #4168B6FF;
        border-radius: 5px;
        padding: 6px 10px 6px 10px;
        background: #4168b6 0% 0% no-repeat padding-box;
        font: normal normal normal 18px/23px "Source Sans Pro";
        color: #FFFFFF;
        box-shadow: 0px 0px 6px rgba(108, 108, 108, 0.56);
    }
    .modal-dialog .modal-content{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border-radius: 10px;
        opacity: 1;
    }

    .active{
        background: #f4f6f9!important;

    }

    .modal-dialog .modal-content .modal-body .title-one{
        text-align: left;
        font: normal normal normal 20px/25px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
        margin-top: 5%;
        margin-left: 23%;
    }
    .modal-dialog .modal-content .modal-body .title-two{
        text-align: left;
        font: italic normal 600 20px/25px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #484848;
        margin-left: 23%;
    }
    .modal-dialog .modal-content .modal-body .body-one{
        margin-top: 4%;
        background: #E8EDFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        text-align: left;
        font: normal normal bold 16px/20px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #212E58;
        opacity: 1;
        margin-right: 19.5em;
        padding-left: 2%;
        margin-left: 23%;
    }
    .modal-dialog .modal-content .modal-body .body-two{
        text-align: left;
        font: normal normal normal 16px/20px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #484848;
        margin-top: 3%;
        margin-right: 5%;
        margin-left: 23%;
    }

    .modal-dialog .modal-content .modal-body .body-three{
        text-align: left;
        font: normal normal 600 16px/20px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
        margin-right: 5%;
    }
    .modal-dialog .modal-content .modal-body .body-four{
        text-align: left;
        font: normal normal normal 16px/20px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #484848;
        margin-top: 2%;
        margin-right: 5%;
        margin-left: 23%;
    }

    /**table*/
    .accent-fuchsia .page-item.active .page-link {
        background-color: #FFFFFF!important;
        border: none!important;
        color: black;!important;
    }
    .accent-fuchsia .page-item{
        margin: 0.2em;
    }
    .accent-fuchsia .page-item .page-link {
        background-color: #ECECEC!important;
        border: none!important;
        color: black;!important;
        border-radius: 100%;
        width: 100%;
    }
    .accent-fuchsia .page-item .page-link:hover {
        background-color: #E2E2E2!important;
        border: none!important;
        color: black;!important;
        border-radius: 100%;
        width: 100%;
    }
    table, tr, td{
        border:none!important;
    }
    table, thead, th{
        border: none!important;
    }


    /**Modal secciones*/
    .three-modal-title{
        text-align: left;
        font: normal normal 600 20px/22px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3F62A8!important;
        opacity: 1;
        margin-left:4%;
        margin-top: -1em;
    }
    .form-control-8{
        background: #FF6D5D 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 220px;
        height: 35px;
        text-align: center;
        font: normal normal normal 16px/20px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 58%;
        margin-top: -2.2em
    }
    .form-control-2{
        background: #8B8B8B 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 120px;
        height: 35px;
        text-align: center;
        font: normal normal normal 16px/20px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 68%;
        margin-top: -2.2em
    }
    .form-control-3{
        background: #36B980 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 120px;
        height: 35px;
        text-align: center;
        font: normal normal normal 16px/20px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 68%;
        margin-top: -2.2em
    }
    .form-control-4{
        background: #1BA198 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 235px;
        height: 35px;
        text-align: center;
        font: normal normal normal 16px/20px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 56.5%;
        margin-top: -2.2em
    }
    .form-control-5{
        background: #5D9EFF 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 160px;
        height: 35px;
        text-align: center;
        font: normal normal normal 16px/20px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 64%;
        margin-top: -2.2em
    }
    .form-control-6{
        background: #FF5D5D 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 180px;
        height: 35px;
        text-align: center;
        font: normal normal normal 16px/20px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 62%;
        margin-top: -2.2em
    }
    .form-control-7{
        background: #FFAE36 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 230px;
        height: 35px;
        text-align: center;
        font: normal normal normal 16px/20px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 57%;
        margin-top: -2.2em
    }
    .form-control-1{
        background: #2D2D2D 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 190px;
        height: 35px;
        text-align: center;
        font: normal normal normal 16px/20px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 61%;
        margin-top: -2.2em
    }
    .form-control-9{
        background: #F456FF 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 250px;
        height: 35px;
        text-align: center;
        font: normal normal normal 16px/20px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 55%;
        margin-top: -2.2em
    }
    .form-control-10{
        background: #5D7DFF 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 140px;
        height: 35px;
        text-align: center;
        font: normal normal normal 16px/20px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 66%;
        margin-top: -2.2em
    }
    .form-control-11{
        background: #685DFF 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 90px;
        height: 35px;
        text-align: center;
        font: normal normal normal 16px/20px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 71%;
        margin-top: -2.2em
    }
    .modal-body{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        box-shadow: 0px 1px 5px #5B5B5B29;
        border-radius: 10px 10px 0px 0px;
        opacity: 1;
        padding-bottom: 2%;
    }
    .modal-text-section .section{
        border-right: 1px solid #D2D2D2;
        transition: all 0.5s;
        padding-right: 16px;
        word-break: break-all;
    }
    .modal-text-section .section .section-title{
        text-align: left;
        font: normal normal 600 22px/28px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #484848;
        opacity: 1;
        margin-top: 5%;
        margin-left: 10%;
        margin-bottom: 2%
    }
    .modal-text-section .vl{
        border: 1px solid #D2D2D2;
        height: 894px;
        position: absolute;
        left: 94%;
        margin-left: -3px;
        top: 0;
    }
    .modal-text-section .line{
        border: 1px solid #D2D2D2;
        height: 894px;
        position: absolute;
        left: 99%;
        margin-left: -3px;
        top: 0;
    }
    .modal-text-section .date{
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #4A4A4A;
        opacity: 1;
        margin-left: 4%;
        margin-top: 4%;
    }
    .modal-text-section .section-evaluate{
        background: #7896FB 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        width: 120px;
        height: 35px;
        padding-top: 5px;
        margin-left: 70%;
        margin-top: -3em;
        text-align: center;
    }
    .modal-text-section .section-evaluate:hover{
        background: #7896FB 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        width: 120px;
        height: 35px;
        padding-top: 5px;
        margin-left: 70%;
        margin-top: -3em;
        text-align: center;
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 1s; /* don't forget to set a duration! */
    }
    .modal-text-section .section-undo-evaluate{
        background: #FFB114 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        width: 180px;
        height: 35px;
        padding-top: 5px;
        margin-left: 63%;
        margin-top: -3em;
        text-align: center;
    }
    .modal-text-section .sections-evaluate{
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF!important;
        opacity: 1;
        text-decoration: none!important;
    }
    .modal-text-section .section-undo-evaluate:hover{
        background: #FFB114 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        width: 180px;
        height: 35px;
        padding-top: 5px;
        margin-left: 63%;
        margin-top: -3em;
        text-align: center;
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 1s; /* don't forget to set a duration! */
    }
    .modal-text-section .valign-middle-img{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        width: 120px;
        height: 35px;
        padding-top: 5px;
        margin-left: 75%;
        margin-top: -3em;
    }
    .modal-text-section .option_{
        margin-bottom: 0.6em;
        margin-top: 0.6em;
        margin-right: 5%;
    }
    .modal-text-section .option_:hover{
        background: #CCCCCC;
    }

    .modal-text-section .active-button{
        background: #F1F1F1;
    }
    .modal-text-section .dropdown-item:active {
        color: #fff;
        text-decoration: none;
        background-color: #F1F1F1;
    }

    /**Linea centro*/
    .center_line>div{
        border: 1px solid #D2D2D2;
        opacity: 1;
        margin-right: 4%;
        margin-left: 2%;
    }
    .center_line{
        margin: 25px;
    }
    .modal-text-section .title{
        text-align: left;
        font: normal normal normal 14px/16px "Source Sans Pro";
        letter-spacing: 0px;
        color: #222E58;
        opacity: 1;
        cursor: pointer;
    }
    .modal-text-section .title:hover{
        color: #222E58;
        cursor: pointer;
    }

    /***/
    .dropdown-toggle .title{
        margin-left: 20%;
        background: #FFFFFF;
    }
    .footer{
        text-align: right;
        margin-left: 48em;
        margin-bottom: 1em;
    }
    .footer>button{
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        padding: 10px 20px 10px 20px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        text-shadow: 0px 3px 6px #FFFFFF29;
        border: 1px solid #4168B6FF;
        box-shadow: 0px 0px 6px transparent;
    }
    .footer>button:hover{
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        padding: 10px 20px 10px 20px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        text-shadow: 0px 3px 6px #FFFFFF29;
        border: 1px solid #4168B6FF;
        box-shadow: 0px 0px 6px rgba(108, 108, 108, 0.56);
    }
    .footer>button:focus{
        outline:none !important;
        outline-width: 0 !important;
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        border: 1px solid #3F62A8;
    }
    .archive-task-monitor{
        background: #F1F1F1  0% 0% no-repeat padding-box;
        box-shadow: 0px 0px 4px #00000029;
        border-radius: 5px;
        opacity: 1;
        margin-left: 20px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3E3E3E!important;
        text-shadow:  0px 3px 6px #FFFFFF29;
        border: none!important;
        padding: 5px 12px 5px 12px;
    }
    .comment-task-monitor{
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848!important;
    }
    .include-task-monitor{
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848!important;
        padding: 2em 2em 2em 2em;
        border-radius: 5px;
        background: #F1F1F1 0% 0% no-repeat padding-box;
        border: 1px solid #E9E9E9;
    }
    .include-task-monitor:hover{
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848!important;
        padding: 2em 2em 2em 2em;
        border-radius: 5px;
        background: #F1F1F1 0% 0% no-repeat padding-box;
        box-shadow: 0px 0px 4px rgba(108, 108, 108, 0.39);
        border: 1px solid #E9E9E9;
    }
    nav svg{
        height: 20px;
    }
    nav span{
        text-align: left;
        font: normal normal normal 20px/27px "Source Sans Pro";
        letter-spacing: 0px;
        color: #707070;
        opacity: 1;
    }


    /**Modal*/

    .not-confirm-on-state-change{
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        letter-spacing: 0px;
        color: #FFFFFF;
        text-shadow:  0px 3px 6px #FFFFFF29;
        width: 90px;
        height: 35px;
        border: 1px solid #4168B6FF;
        padding: 6px 10px 6px 10px;
        background: #4168b6 0% 0% no-repeat padding-box;
        font: normal normal normal 18px/23px "Source Sans Pro";
        box-shadow: 0px 0px 6px transparent;
    }
    .not-confirm-on-state-change:hover{
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        letter-spacing: 0px;
        color: #FFFFFF;
        text-shadow:  0px 3px 6px #FFFFFF29;
        width: 90px;
        height: 35px;
        border: 1px solid #4168B6FF;
        padding: 6px 10px 6px 10px;
        background: #4168b6 0% 0% no-repeat padding-box;
        font: normal normal normal 18px/23px "Source Sans Pro";
        box-shadow: 0px 0px 6px rgba(108, 108, 108, 0.56);
    }
    .not-confirm-on-state-change:focus{
        outline:none !important;
        outline-width: 0 !important;
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        border: 1px solid #3F62A8;
    }
    .confirm-on-state-change {
        font: normal normal 600 18px/23px 'Source Sans Pro';
        color: #3F62A8;
        text-shadow:  0px 3px 6px #FFFFFF29;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #3F62A8;
        border-radius: 5px;
        opacity: 1;
        width: 90px;
        height: 35px;
        margin-top: 20px;
        text-align: center;
        padding: 6px 10px 6px 10px;
    }
    .confirm-on-state-change:hover {
        text-shadow:  0px 3px 6px #FFFFFF29;
        border-radius: 5px;
        opacity: 1;
        width: 90px;
        height: 35px;
        margin-top: 20px;
        text-align: center;
        font: normal normal 600 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3F62A8;
        background: #ffffff 0% 0% no-repeat padding-box;
        border: 1px solid #3F62A8;
        padding: 6px 10px 6px 10px;
        box-shadow: 0px 0px 5px rgba(108, 108, 108, 0.39);
    }
    /** Modal de rechazo  **/
    #undoModal .process{
        font: normal normal 600 18px/23px 'Source Sans Pro';
        color: #474747;
        text-shadow:  0px 3px 6px #FFFFFF29;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #464646;
        border-radius: 5px;
        opacity: 1;
        margin-top: 30px;
        text-align: center;
        padding: 5px 2em 5px 2em;
    }
    /** Calificación**/

    #task_monitor_confirmModal .process{
        font: normal normal 600 18px/23px 'Source Sans Pro';
        color: #3F62A8;
        text-shadow:  0px 3px 6px #3F62A8;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #3F62A8;
        border-radius: 5px;
        opacity: 1;
        margin-top: 40px;
        text-align: center;
        padding: 5px 2em 5px 2em;
    }
    /**
      CUSTOM PAGINATOR
     */
    /**Paginación*/

    .page-item{
        background: #ECECEC!important;
    }
    .page-link{
        text-align: center;
        font: normal normal normal 20px/25px "Source Sans Pro";
        letter-spacing: 0px;
        color: #414141!important;
        opacity: 1;
        margin: 0.5em;
        border-radius: 100%!important;
    }

    .current-page{
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 20px!important;
        opacity: 1;
        color: #FFFFFF;
        padding: 1px 8px 1px 8px;
    }
    .custom_paginator .pagination li.page-item.disabled>span{
        background: #E2E2E2!important;
        color: #414141 !important;
    }
    .custom_paginator .pagination li.page-item.active>span,
    .custom_paginator .pagination li.page-item.active>span{
        text-align: center;
        color: #FFFFFF!important;
        border-radius: 100%!important;
        width: 100%;
        background: #3F62A8!important;
    }

    .custom_paginator .pagination li:first-child>button,
    .custom_paginator .pagination li:first-child>span,
    .custom_paginator .pagination li:last-child>button,
    .custom_paginator .pagination li:last-child>span{
        text-align: center;
        color: #fff0f0!important;
        border-radius: 100%!important;
        max-width: 100%;
        background: #3F62A8!important;
        /*width: 2em!important;*/
    }

    .custom_paginator .pagination li:first-child>button:hover,
    .custom_paginator .pagination li:last-child>button:hover{
        text-align: center;
        color: #FFFFFF!important;
        max-width: 100%;
        border-radius: 100%!important;
        background: #3F62A8!important;
    }

    /**Modal de secciones**/
    .modal-header-section .reloj{
        width: 120px;
        height: 35px;
        border: 1px solid #B8B8B8!important;
        background: #FFFFFF!important;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #757575;
        margin-left: 82%;
        margin-top: -2em
    }

    .modal-header-section .type-state{
        text-align: center;
        color: #FFFFFF;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        padding-top: 5px
    }
    .modal-header-section .close{
        margin-top: -2.3em;
        margin-right: -1.5%;
    }


    /**Modal Cerrar*/

    /**Linea centro*/
    .modal-close .modal-close .close-line>div{
        border: 1px solid #D2D2D2;
        opacity: 1;
        margin-right: 10%;
        margin-left: 10%;
    }
    .modal-close .modal-close .close-line{
        margin: 25px;
    }

    /**Modal uno*/
    .option_confirm:hover{
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 1s; /* don't forget to set a duration! */
    }
    .form-control:focus{
        outline:none !important;
        outline-width: 0 !important;
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        border: 1px solid #C4C4C4!important;
    }

    /**table customer*/

    .header-task-monitor  .state-title{
        width: 5%;
        vertical-align: middle;
    }
    .header-task-monitor  .state-title .state-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: center;
        font: normal normal normal 14px/16px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor  .customer{
        vertical-align: middle;
    }
    .header-task-monitor  .customer .customer-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: left;
        font: normal normal normal 14px/16px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor  .start-date{
        vertical-align: middle;
    }
    .header-task-monitor  .start-date .start-date-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: center;
        font: normal normal normal 14px/16px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor  .end-date{
        vertical-align: middle
    }
    .header-task-monitor  .end-date .end-date-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: center;
        font: normal normal normal 14px/16px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor  .cycle{
        vertical-align: middle
    }
    .header-task-monitor  .cycle .task-cycle-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: center;
        font: normal normal normal 14px/16px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor .priority-title{
        vertical-align: middle
    }

    .header-task-monitor .priority-title .priority-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: center;
        font: normal normal normal 14px/16px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor .approval-title{
        vertical-align: middle;
        text-align: center;
        font: normal normal normal 12px/14px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }

    .hover-table{
        background-color: white !important;
    }
    .hover-table:hover{
        background-color: #f4f6f9 !important;
    }

    .edge-of-state{
        background: white;
        position: relative;
        border-radius: 8px;
        vertical-align: middle!important;
    }
    .edge-of-state .customer-state-of-edge{
        position: absolute;
        left:-1.8em;
        background:white;
        width: 5px;
        height: 30px;
        border-radius: 0 3px 3px 0;
    }
    .name-state{
        text-align: left;
        font: normal normal normal 16px/18px 'Source Sans Pro';
        color: #FFFFFF;
        width: 120px;
        vertical-align: middle!important;
    }
    .table td, .table th {
        padding: 0.75rem;
        vertical-align: middle!important;
        border-top: 1px solid #dee2e6;
    }
    .showTask .name{
        text-align: left;
        font: normal normal normal 14px/16px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #777777;
        opacity: 1;
    }
    .showTask .img-state{
        text-align: left;
        font: normal normal normal 16px/18px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #414141;
        opacity: 1;
    }
    .start-date{
        text-align: center;
        font: normal normal normal 16px/18px 'Source Sans Pro';
        color: #414141;
    }
    .date-end{
        text-align: center;
        font: normal normal normal 16px/18px 'Source Sans Pro';
        color: #414141;
    }
}
@media (min-width: 1200px) and (max-width: 1300px){
    /**Menú*/
    .navbar {
        background: #FFFFFF 0% 0% no-repeat padding-box!important;
        box-shadow: 0px 3px 5px #8E8E8E29;
        opacity: 1;
        height: 103px;
    }
    .navbar .navbar-brand .savmanagemnet-logo{
        max-width: 210px;
        max-height: 33px;
    }
    .navbar .img-customer{
        text-align: right;
        margin-right: 8%;
    }
    .navbar .img-customer .logo-customer{
        max-width: 100px;
        max-height: 50px;
    }
    .d-flex{
        width: 20%;
        text-align: right;
        margin-right: -7%;
    }
    .d-flex .close-section{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #646464;
        opacity: 1;
        border-radius: 10px;
        padding: 6px 13px 6px 13px;
        text-decoration: none!important;
        margin-top: 6px;
        text-align: center;
        font: normal normal 600 16px/20px 'Source Sans Pro';
        color: #4E4E4E;
    }
    .d-flex .close-section:hover{
        background: #E8E8E8 0% 0% no-repeat padding-box;
        border: 1px solid #646464;
        opacity: 1;
        border-radius: 10px;
        padding: 6px 13px 6px 13px;
        text-decoration: none!important;
        margin-top: 6px;
        text-align: center;
        font: normal normal 600 16px/20px 'Source Sans Pro';
        color: #4E4E4E;
    }
    .navbar .vl{
        border-left: 1px solid #CCCCCC;
        height: 40px;
        position: absolute;
        left: 84.5%;
        top: 35%;
    }

    /**Buscar*/
    .task-monitor-search{
        margin-top: 30px;
    }
    .task-monitor-search .form-control{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #C4C4C4!important;
        border-radius: 5px!important;
        color: #AAAAAA!important;
        opacity: 1;
        margin-left: 3%;
        margin-right: 3.5%;
        padding: 1.3em 2em 1.3em 2em;
    }
    .task-monitor-search>input:focus {
        outline:none !important;
        outline-width: 0 !important;
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        border: 1px solid #C4C4C4;
    }

    /**Resultados y actualizar*/
    .help-block{
        text-align: left;
        font: normal normal normal 20px/27px "Source Sans Pro";
        letter-spacing: 0px;
        color: #707070!important;
        opacity: 1;
        margin-left: 2.5%;
    }
    .number{
        margin-top: -1.7em;
        text-align: center;
        color: #FFFFFF;
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0;
        padding: 2px 6px 2px 6px;
    }

    #button_filter{
        background: #3F62A8 0% 0% no-repeat padding-box!important;
        border-radius: 5px;
        padding: 8px 15px 8px 15px!important;
        text-decoration: none!important;
        border: none!important;
        text-align: center;
        font: normal normal normal 16px/20px 'Source Sans Pro'!important;
        color: #FFFFFF!important;
        margin-right: 1em;
        margin-top: 0.5em;
        margin-bottom: 0.5em;
    }
    #button_filter:hover{
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 3s; /* don't forget to set a duration! */
    }
    #filter-panel{
        height: auto;
        position: absolute;
        width: 99.25%;
        z-index: 99;
        margin-top: -25px;
        margin-left: 1%;
        padding-right: 2.7em;
        padding-top: 25px;
    }
    .filter-panel-body{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        box-shadow: 0px 4px 6px #51515129;
        border-radius: 5px;
    }
    .filter-panel-body:before{
        content: "";
        position: absolute;
        top: -11.5px;
        right: 11.5em;
        width: 0;
        height: 0;
        border-width: 0 35px 35px;
        border-style: solid;
        border-color: transparent transparent #FFFFFF;
    }
    .filter-panel-body .dropdown-menu{
        border: transparent!important;
        background: #FFFFFF 0% 0% no-repeat padding-box!important;
        box-shadow: 0px 4px 6px #51515129!important;
    }
    .filter-panel-body .states-title{
        margin-left: 2.5em;
        padding-top: 2em;
    }
    .filter-panel-body .states-title>h1{
        text-align: left;
        font: normal normal 600 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
    }
    .filter-panel-body .filter-states{
        margin-top: 1.7em;
    }
    .filter-panel-body .filter-states .state_checkbox{
        margin-left: 2.5em;
    }

    .filter-panel-body>hr {
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
        border: 0;
        border-top: 1px solid #f3f2f2 !important;
        width: 95%;
    }

    .filter-panel-body .date_title{
        margin-left: 2.5em;
        margin-bottom: 1em;
    }
    .filter-panel-body .date_title>h1{
        text-align: left;
        font: normal normal 600 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
    }
    .filter-panel-body .separator{
        text-align: left;
        font: normal normal normal 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
        margin-top: 0.3em;
        margin-left: -9.3em;
    }
    .filter-panel-body .start_date{
        text-align: left;
        font: normal normal normal 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
        border: 2px solid #D2D2D2;
        border-radius: 5px;
        width: 188px;
        height: 46px;
        margin-left: 1.5em;
    }

    .filter-panel-body .icon-start-at{
        margin-top: -2.9em;
        margin-left: 10.9em;
        border: none!important;
        background: none!important;
    }
    .filter-panel-body .end_date{
        text-align: left;
        font: normal normal normal 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
        border: 2px solid #D2D2D2;
        border-radius: 5px;
        width: 188px;
        height: 46px;
        margin-top: 3em;
        margin-left: -3.8em;
    }
    .filter-panel-body .icon-end-at{
        margin-top: -2.9em;
        margin-left: 4.3em;
        border: none!important;
        background: none!important;
    }
    .filter-panel-body .priority-title{
        margin-bottom: 1em;
    }
    .filter-panel-body .priority-title>h1{
        text-align: left;
        font: normal normal 600 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
    }

    .filter-panel-body .clean-filters{
        margin-left: 4.8em;
        padding-top: 0.9em;
    }
    .filter-panel-body .clean-filters .title{
        text-align: left;
        font: normal 600 normal 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #FF3434;
        cursor: pointer;
    }
    .filter-panel-body .clean-filters .title:hover{
        color:  #FF3434!important;
    }
    .filter-panel-body .filter-button{
        text-align: right;
        margin-left: -4.5em;
        margin-bottom: 2em;
        margin-top: 0.3rem;
    }
    .filter-panel-body .filter-button .close-filter{
        text-align: center;
        font: normal normal normal 18px/24px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #3F62A8;
        border: 2px solid #3F62A8;
        border-radius: 5px;
        padding: 8px 10px 8px 10px;
    }
    .filter-panel-body .filter-button .close-filter:hover{
        text-align: center;
        font: normal normal normal 18px/24px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #3F62A8;
        opacity: 1;
        background: #ffffff 0% 0% no-repeat padding-box;
        border: 2px solid #3F62A8;
        border-radius: 5px;
        padding: 8px 10px 8px 10px;
        box-shadow: 0px 0px 5px rgba(108, 108, 108, 0.39);
    }

    .filter-panel-body .filter-button .apply-filter{
        text-align: center;
        font: normal normal normal 18px/24px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #FFFFFF;
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 5px;
        padding: 9px 15px 9px 15px;
        margin-left: 1em;
    }
    .filter-panel-body .filter-button .apply-filter:hover{
        text-align: center;
        letter-spacing: 0px;
        border-radius: 5px;
        padding: 9px 15px 9px 15px;
        background: #3F62A8 0% 0% no-repeat padding-box;
        font: normal normal normal 18px/24px 'Source Sans Pro';
        color: #FFFFFF;
        box-shadow: 0px 0px 6px rgba(108, 108, 108, 0.56);
    }
    .update>a{
        text-align: left;
        font: normal normal 600 16px/21px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070!important;
        opacity: 1;
        margin-right: 1.3em;
    }
    .update>button{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        opacity: 1;
        border-radius: 5px;
        padding: 8px 15px 8px 15px;
        text-decoration: none!important;
        margin-top: 6px;
        text-align: center;
        font: normal normal 600 16px/21px 'Source Sans Pro';
        color: #707070;
    }
    .update>a{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        opacity: 1;
        border-radius: 5px;
        padding: 8px 15px 8px 15px;
        text-decoration: none!important;
        margin-top: 6px;
        text-align: center;
        font: normal normal 600 16px/21px 'Source Sans Pro';
        color: #707070;
    }
    .update>a:hover{
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 3s; /* don't forget to set a duration! */
    }
    /**body table*/
    .header-task-monitor{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        opacity: 1;
    }
    .header-task-monitor .text-center{
        padding: 15px 0px;
    }
    .header-task-monitor .customer{
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
        padding: 0px 0px 0px 15px;
    }
    .priority-class-customer-1{
        background: #6594FF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        margin-left: 15%;
        margin-right: 15%;
        padding-top: 2%;
        padding-bottom: 3%;
        text-align: center;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
    }
    .priority-class-customer-2{
        background: #1A3D8F 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        margin-left: 25%;
        margin-right: 25%;
        padding-top: 2%;
        padding-bottom: 3%;
    }
    .priority-class-customer-3{
        background: #757575 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        margin-left: 20%;
        margin-right: 20%;
        padding-top: 2%;
        padding-bottom: 3%;
    }
    .priority-class-customer-4{
        background: #FF6665 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        margin-left: 25%;
        margin-right: 25%;
        padding-top: 2%;
        padding-bottom: 3%;
    }
    .priority-class-customer-5{
        background: #FF3434 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        margin-left: 15%;
        margin-right: 15%;
        padding-top: 2%;
        padding-bottom: 3%;
    }

    .state-class-custom-8{
        background: #FF6D5D 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-2{
        background: #8B8B8B 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-3{
        background: #36B980 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-4{
        background: #1BA198 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-5{
        background: #5D9EFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-6{
        background: #FF5D5D 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-7{
        background: #FFAE36 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-1{
        background: #2D2D2D 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-9{
        background: #F456FF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-10{
        background: #5D7DFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-11{
        background: #685DFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }

    .days-task{
        text-align: center;
        font: normal normal normal 14px/18px Source Sans Pro;
        letter-spacing: 0px;
        color: #FFFFFF;
        opacity: 1;
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 5px;
        margin-left: 24%;
        margin-right: 24%;
        padding-top: 3%;
        padding-bottom: 4%;
    }
    .undo-evaluate {
        text-decoration: none !important;
        text-align: center;
        font: normal normal normal 14px/16px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF !important;
    }
    .undo-button-evaluate {
        background: #FFB114 0% 0% no-repeat padding-box;
        box-shadow: 0px 2px 4px #00000029;
        border-radius: 5px;
        opacity: 1;
        cursor: pointer;
        padding-left: 50px;
    }
    .undo-button-evaluate:hover{
        background: #FFB114 0% 0% no-repeat padding-box;
        box-shadow: 0px 2px 4px #00000029;
        border-radius: 5px;
        opacity: 1;
        cursor: pointer;
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 1s; /* don't forget to set a duration! */
    }
    .evaluate{
        text-decoration: none!important;
        text-align: center;
        font: normal normal normal 14px/16px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF!important;
        opacity: 1;
        padding-left: 13px;
    }
    .button-evaluate{
        background: #7896FB 0% 0% no-repeat padding-box;
        box-shadow: 0px 2px 4px #00000029;
        border-radius: 5px;
        opacity: 1;
    }
    .button-evaluate:hover{
        background: #7896FB 0% 0% no-repeat padding-box;
        box-shadow: 0px 2px 4px #00000029;
        border-radius: 5px;
        opacity: 1;
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 1s; /* don't forget to set a duration! */
    }
    .img-evaluate{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    /**Modal dialog*/
    .modal-dialog .modal-content .modal-body .modal-card{
        box-shadow: 0px 0px 6px #00000029;
        border-radius: 5px;
        opacity: 1;
        width: 320px;
        height: 334px;
        margin-left: 12%;
        margin-top: 3%;
        margin-bottom: 3%;
    }
    .modal-dialog .modal-content .modal-body .two-modal-card{
        box-shadow: 0px 0px 6px #00000029;
        border-radius: 5px;
        opacity: 1;
        width: 320px;
        height: 334px;
        margin-left: 2%;
        margin-top: 3%;
        margin-bottom: 3%;
    }
    .modal-dialog .modal-content .modal-body .modal-card .text-modal-monitor{
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
        padding-left: 7%;
        padding-right: 7%;
    }
    .modal-dialog .modal-content .modal-body .two-modal-card .text-modal-monitor{
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
        padding-left: 7%;
        padding-right: 7%;
    }
    .modal-dialog .modal-content .modal-body .modal-card .text-modal-monitor .bold-text{
        text-align: center;
        font: normal normal 600 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
    }
    .modal-dialog .modal-content .modal-body .two-modal-card .text-modal-monitor .bold-text{
        text-align: center;
        font: normal normal 600 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
    }
    .modal-dialog .modal-content .modal-header .modal-title{
        text-align: left;
        font: normal normal 600 24px/20px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3F62A8;
        opacity: 1;
        margin-top: 0.2em;
        margin-left: -19em;
    }
    .modal-dialog .modal-content .modal-header{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        box-shadow: 0px 1px 5px #5B5B5B29;
        border-radius: 10px 10px 0px 0px;
        opacity: 1;
    }
    .modal-dialog .modal-content .modal-body>p{
        text-align: left;
        font: normal normal normal 20px/25px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
        opacity: 1;
        padding-left: 6%;
        padding-right: 8%;
        margin-top: 1%;
    }
    .modal-dialog .modal-content .modal-footer .cancel-modal-approval{
        text-align: center;
        font: normal normal 600 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3F62A8;
        text-shadow:  0px 3px 6px #FFFFFF29;
        opacity: 1;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #3F62A8;
        border-radius: 5px;
        padding: 6px 10px 6px 10px;
    }
    .modal-dialog .modal-content .modal-footer .cancel-modal-approval:hover{
        text-align: center;
        font: normal normal 600 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3F62A8;
        opacity: 1;
        background: #ffffff 0% 0% no-repeat padding-box;
        border: 1px solid #3F62A8;
        border-radius: 5px;
        padding: 6px 10px 6px 10px;
        box-shadow: 0px 0px 5px rgba(108, 108, 108, 0.39);
    }
    .modal-dialog .modal-content .modal-footer .confirm-modal-approval{
        text-align: center;
        letter-spacing: 0px;
        opacity: 1;
        border: 1px solid #3F62A8;
        border-radius: 5px;
        padding: 6px 10px 6px 10px;
        background: #3F62A8 0% 0% no-repeat padding-box;
        font: normal normal normal 18px/23px "Source Sans Pro";
        color: #FFFFFF;
        text-shadow:  0px 3px 6px #FFFFFF29;
    }
    .modal-dialog .modal-content .modal-footer .confirm-modal-approval:hover{
        text-align: center;
        letter-spacing: 0px;
        opacity: 1;
        border: 1px solid #4168B6FF;
        border-radius: 5px;
        padding: 6px 10px 6px 10px;
        background: #4168b6 0% 0% no-repeat padding-box;
        font: normal normal normal 18px/23px "Source Sans Pro";
        color: #FFFFFF;
        box-shadow: 0px 0px 6px rgba(108, 108, 108, 0.56);
    }
    .modal-dialog .modal-content{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border-radius: 10px;
        opacity: 1;
    }

    .active{
        background: #f4f6f9!important;

    }

    .modal-dialog .modal-content .modal-body .title-one{
        text-align: left;
        font: normal normal normal 20px/25px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
        margin-top: 5%;
        margin-left: 23%;
    }
    .modal-dialog .modal-content .modal-body .title-two{
        text-align: left;
        font: italic normal 600 20px/25px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #484848;
        margin-left: 23%;
    }
    .modal-dialog .modal-content .modal-body .body-one{
        margin-top: 4%;
        background: #E8EDFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        text-align: left;
        font: normal normal bold 16px/20px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #212E58;
        opacity: 1;
        margin-right: 19.5em;
        padding-left: 2%;
        margin-left: 23%;
    }
    .modal-dialog .modal-content .modal-body .body-two{
        text-align: left;
        font: normal normal normal 16px/20px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #484848;
        margin-top: 3%;
        margin-right: 5%;
        margin-left: 23%;
    }

    .modal-dialog .modal-content .modal-body .body-three{
        text-align: left;
        font: normal normal 600 16px/20px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
        margin-right: 5%;
    }
    .modal-dialog .modal-content .modal-body .body-four{
        text-align: left;
        font: normal normal normal 16px/20px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #484848;
        margin-top: 2%;
        margin-right: 5%;
        margin-left: 23%;
    }

    /**table*/
    .accent-fuchsia .page-item.active .page-link {
        background-color: #FFFFFF!important;
        border: none!important;
        color: black;!important;
    }
    .accent-fuchsia .page-item{
        margin: 0.2em;
    }
    .accent-fuchsia .page-item .page-link {
        background-color: #ECECEC!important;
        border: none!important;
        color: black;!important;
        border-radius: 100%;
        width: 100%;
    }
    .accent-fuchsia .page-item .page-link:hover {
        background-color: #E2E2E2!important;
        border: none!important;
        color: black;!important;
        border-radius: 100%;
        width: 100%;
    }
    table, tr, td{
        border:none!important;
    }
    table, thead, th{
        border: none!important;
    }


    /**Modal secciones*/
    .three-modal-title{
        text-align: left;
        font: normal normal 600 20px/22px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3F62A8!important;
        opacity: 1;
        margin-left:4%;
        margin-top: -1em;
    }
    .form-control-8{
        background: #FF6D5D 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 220px;
        height: 35px;
        text-align: center;
        font: normal normal normal 16px/20px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 62%;
        margin-top: -2.2em
    }
    .form-control-2{
        background: #8B8B8B 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 120px;
        height: 35px;
        text-align: center;
        font: normal normal normal 16px/20px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 71.5%;
        margin-top: -2.2em
    }
    .form-control-3{
        background: #36B980 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 120px;
        height: 35px;
        text-align: center;
        font: normal normal normal 16px/20px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 71.5%;
        margin-top: -2.2em
    }
    .form-control-4{
        background: #1BA198 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 235px;
        height: 35px;
        text-align: center;
        font: normal normal normal 16px/20px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 60.5%;
        margin-top: -2.2em
    }
    .form-control-5{
        background: #5D9EFF 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 160px;
        height: 35px;
        text-align: center;
        font: normal normal normal 16px/20px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 67.5%;
        margin-top: -2.2em
    }
    .form-control-6{
        background: #FF5D5D 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 180px;
        height: 35px;
        text-align: center;
        font: normal normal normal 16px/20px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 65.5%;
        margin-top: -2.2em
    }
    .form-control-7{
        background: #FFAE36 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 230px;
        height: 35px;
        text-align: center;
        font: normal normal normal 16px/20px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 61%;
        margin-top: -2.2em
    }
    .form-control-1{
        background: #2D2D2D 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 190px;
        height: 35px;
        text-align: center;
        font: normal normal normal 16px/20px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 64.5%;
        margin-top: -2.2em
    }
    .form-control-9{
        background: #F456FF 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 250px;
        height: 35px;
        text-align: center;
        font: normal normal normal 16px/20px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 59%;
        margin-top: -2.2em
    }
    .form-control-10{
        background: #5D7DFF 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 140px;
        height: 35px;
        text-align: center;
        font: normal normal normal 16px/20px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 69%;
        margin-top: -2.2em
    }
    .form-control-11{
        background: #685DFF 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 90px;
        height: 35px;
        text-align: center;
        font: normal normal normal 16px/20px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 74%;
        margin-top: -2.2em
    }
    .modal-body{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        box-shadow: 0px 1px 5px #5B5B5B29;
        border-radius: 10px 10px 0px 0px;
        opacity: 1;
        padding-bottom: 2%;
    }
    .modal-text-section .section{
        border-right: 1px solid #D2D2D2;
        transition: all 0.5s;
        padding-right: 16px;
        word-break: break-all;
    }
    .modal-text-section .section .section-title{
        text-align: left;
        font: normal normal 600 22px/28px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #484848;
        opacity: 1;
        margin-top: 5%;
        margin-left: 10%;
        margin-bottom: 2%
    }
    .modal-text-section .vl{
        border: 1px solid #D2D2D2;
        height: 894px;
        position: absolute;
        left: 94%;
        margin-left: -3px;
        top: 0;
    }
    .modal-text-section .line{
        border: 1px solid #D2D2D2;
        height: 894px;
        position: absolute;
        left: 99%;
        margin-left: -3px;
        top: 0;
    }
    .modal-text-section .date{
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #4A4A4A;
        opacity: 1;
        margin-left: 4%;
        margin-top: 4%;
    }
    .modal-text-section .section-evaluate{
        background: #7896FB 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        width: 120px;
        height: 35px;
        padding-top: 5px;
        margin-left: 75%;
        margin-top: -3em;
        text-align: center;
    }
    .modal-text-section .section-evaluate:hover{
        background: #7896FB 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        width: 120px;
        height: 35px;
        padding-top: 5px;
        margin-left: 75%;
        margin-top: -3em;
        text-align: center;
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 1s; /* don't forget to set a duration! */
    }
    .modal-text-section .section-undo-evaluate{
        background: #FFB114 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        width: 180px;
        height: 35px;
        padding-top: 5px;
        margin-left: 69%;
        margin-top: -3em;
        text-align: center;
    }
    .modal-text-section .sections-evaluate{
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF!important;
        opacity: 1;
        text-decoration: none!important;
    }
    .modal-text-section .section-undo-evaluate:hover{
        background: #FFB114 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        width: 180px;
        height: 35px;
        padding-top: 5px;
        margin-left: 69%;
        margin-top: -3em;
        text-align: center;
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 1s; /* don't forget to set a duration! */
    }
    .modal-text-section .valign-middle-img{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        width: 120px;
        height: 35px;
        padding-top: 5px;
        margin-left: 79.5%;
        margin-top: -3em;
    }
    .modal-text-section .option_{
        margin-bottom: 0.6em;
        margin-top: 0.6em;
        margin-right: 5%;
    }
    .modal-text-section .option_:hover{
        background: #CCCCCC;
    }
    .modal-text-section .active-button{
        background: #F1F1F1;
    }
    .modal-text-section .dropdown-item:active {
        color: #fff;
        text-decoration: none;
        background-color: #F1F1F1;
    }

    /**Linea centro*/
    .center_line>div{
        border: 1px solid #D2D2D2;
        opacity: 1;
        margin-right: 4%;
        margin-left: 2%;
    }
    .center_line{
        margin: 25px;
    }
    .modal-text-section .title{
        text-align: left;
        font: normal normal normal 14px/16px "Source Sans Pro";
        letter-spacing: 0px;
        color: #222E58;
        opacity: 1;
        cursor: pointer;
    }
    .modal-text-section .title:hover{
        color: #222E58;
        cursor: pointer;
    }

    /***/
    .dropdown-toggle .title{
        margin-left: 20%;
        background: #FFFFFF;
    }
    .footer{
        text-align: right;
        margin-left: 48em;
        margin-bottom: 1em;
    }
    .footer>button{
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        padding: 10px 20px 10px 20px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        text-shadow: 0px 3px 6px #FFFFFF29;
        border: 1px solid #4168B6FF;
        box-shadow: 0px 0px 6px transparent;
    }
    .footer>button:hover{
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        padding: 10px 20px 10px 20px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        text-shadow: 0px 3px 6px #FFFFFF29;
        border: 1px solid #4168B6FF;
        box-shadow: 0px 0px 6px rgba(108, 108, 108, 0.56);
    }
    .footer>button:focus{
        outline:none !important;
        outline-width: 0 !important;
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        border: 1px solid #3F62A8;
    }
    .archive-task-monitor{
        background: #F1F1F1  0% 0% no-repeat padding-box;
        box-shadow: 0px 0px 4px #00000029;
        border-radius: 5px;
        opacity: 1;
        margin-left: 20px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3E3E3E!important;
        text-shadow:  0px 3px 6px #FFFFFF29;
        border: none!important;
        padding: 5px 12px 5px 12px;
    }
    .comment-task-monitor{
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848!important;
    }
    .include-task-monitor{
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848!important;
        padding: 2em 2em 2em 2em;
        border-radius: 5px;
        background: #F1F1F1 0% 0% no-repeat padding-box;
        border: 1px solid #E9E9E9;
    }
    .include-task-monitor:hover{
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848!important;
        padding: 2em 2em 2em 2em;
        border-radius: 5px;
        background: #F1F1F1 0% 0% no-repeat padding-box;
        box-shadow: 0px 0px 4px rgba(108, 108, 108, 0.39);
        border: 1px solid #E9E9E9;
    }
    nav svg{
        height: 20px;
    }
    nav span{
        text-align: left;
        font: normal normal normal 20px/27px "Source Sans Pro";
        letter-spacing: 0px;
        color: #707070;
        opacity: 1;
    }


    /**Modal*/

    .not-confirm-on-state-change{
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        letter-spacing: 0px;
        color: #FFFFFF;
        text-shadow:  0px 3px 6px #FFFFFF29;
        width: 90px;
        height: 35px;
        border: 1px solid #4168B6FF;
        padding: 6px 10px 6px 10px;
        background: #4168b6 0% 0% no-repeat padding-box;
        font: normal normal normal 18px/23px "Source Sans Pro";
        box-shadow: 0px 0px 6px transparent;
    }
    .not-confirm-on-state-change:hover{
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        letter-spacing: 0px;
        color: #FFFFFF;
        text-shadow:  0px 3px 6px #FFFFFF29;
        width: 90px;
        height: 35px;
        border: 1px solid #4168B6FF;
        padding: 6px 10px 6px 10px;
        background: #4168b6 0% 0% no-repeat padding-box;
        font: normal normal normal 18px/23px "Source Sans Pro";
        box-shadow: 0px 0px 6px rgba(108, 108, 108, 0.56);
    }
    .not-confirm-on-state-change:focus{
        outline:none !important;
        outline-width: 0 !important;
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        border: 1px solid #3F62A8;
    }
    .confirm-on-state-change {
        font: normal normal 600 18px/23px 'Source Sans Pro';
        color: #3F62A8;
        text-shadow:  0px 3px 6px #FFFFFF29;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #3F62A8;
        border-radius: 5px;
        opacity: 1;
        width: 90px;
        height: 35px;
        margin-top: 20px;
        text-align: center;
        padding: 6px 10px 6px 10px;
    }
    .confirm-on-state-change:hover {
        text-shadow:  0px 3px 6px #FFFFFF29;
        border-radius: 5px;
        opacity: 1;
        width: 90px;
        height: 35px;
        margin-top: 20px;
        text-align: center;
        font: normal normal 600 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3F62A8;
        background: #ffffff 0% 0% no-repeat padding-box;
        border: 1px solid #3F62A8;
        padding: 6px 10px 6px 10px;
        box-shadow: 0px 0px 5px rgba(108, 108, 108, 0.39);
    }
    /** Modal de rechazo  **/
    #undoModal .process{
        font: normal normal 600 18px/23px 'Source Sans Pro';
        color: #474747;
        text-shadow:  0px 3px 6px #FFFFFF29;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #464646;
        border-radius: 5px;
        opacity: 1;
        margin-top: 30px;
        text-align: center;
        padding: 5px 2em 5px 2em;
    }
    /** Calificación**/

    #task_monitor_confirmModal .process{
        font: normal normal 600 18px/23px 'Source Sans Pro';
        color: #3F62A8;
        text-shadow:  0px 3px 6px #3F62A8;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #3F62A8;
        border-radius: 5px;
        opacity: 1;
        margin-top: 40px;
        text-align: center;
        padding: 5px 2em 5px 2em;
    }
    /**
      CUSTOM PAGINATOR
     */
    /**Paginación*/

    .page-item{
        background: #ECECEC!important;
    }
    .page-link{
        text-align: center;
        font: normal normal normal 20px/25px "Source Sans Pro";
        letter-spacing: 0px;
        color: #414141!important;
        opacity: 1;
        margin: 0.5em;
        border-radius: 100%!important;
    }

    .current-page{
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 20px!important;
        opacity: 1;
        color: #FFFFFF;
        padding: 1px 8px 1px 8px;
    }
    .custom_paginator .pagination li.page-item.disabled>span{
        background: #E2E2E2!important;
        color: #414141 !important;
    }
    .custom_paginator .pagination li.page-item.active>span,
    .custom_paginator .pagination li.page-item.active>span{
        text-align: center;
        color: #FFFFFF!important;
        border-radius: 100%!important;
        width: 100%;
        background: #3F62A8!important;
    }

    .custom_paginator .pagination li:first-child>button,
    .custom_paginator .pagination li:first-child>span,
    .custom_paginator .pagination li:last-child>button,
    .custom_paginator .pagination li:last-child>span{
        text-align: center;
        color: #fff0f0!important;
        border-radius: 100%!important;
        max-width: 100%;
        background: #3F62A8!important;
        /*width: 2em!important;*/
    }

    .custom_paginator .pagination li:first-child>button:hover,
    .custom_paginator .pagination li:last-child>button:hover{
        text-align: center;
        color: #FFFFFF!important;
        max-width: 100%;
        border-radius: 100%!important;
        background: #3F62A8!important;
    }

    /**Modal de secciones**/
    .modal-header-section .reloj{
        width: 120px;
        height: 35px;
        border: 1px solid #B8B8B8!important;
        background: #FFFFFF!important;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #757575;
        margin-left: 84%;
        margin-top: -2em
    }

    .modal-header-section .type-state{
        text-align: center;
        color: #FFFFFF;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        padding-top: 5px
    }
    .modal-header-section .close{
        margin-top: -2.3em;
        margin-right: -1.5%;
    }


    /**Modal Cerrar*/

    /**Linea centro*/
    .modal-close .modal-close .close-line>div{
        border: 1px solid #D2D2D2;
        opacity: 1;
        margin-right: 10%;
        margin-left: 10%;
    }
    .modal-close .modal-close .close-line{
        margin: 25px;
    }

    /**Modal uno*/
    .option_confirm:hover{
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 1s; /* don't forget to set a duration! */
    }
    .form-control:focus{
        outline:none !important;
        outline-width: 0 !important;
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        border: 1px solid #C4C4C4!important;
    }

    /**table customer*/

    .header-task-monitor  .state-title{
        width: 5%;
        vertical-align: middle;
    }
    .header-task-monitor  .state-title .state-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: center;
        font: normal normal normal 14px/16px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor  .customer{
        vertical-align: middle;
    }
    .header-task-monitor  .customer .customer-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: left;
        font: normal normal normal 14px/16px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor  .start-date{
        vertical-align: middle;
    }
    .header-task-monitor  .start-date .start-date-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: center;
        font: normal normal normal 14px/16px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor  .end-date{
        vertical-align: middle
    }
    .header-task-monitor .end-date .end-date-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: center;
        font: normal normal normal 14px/16px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor .cycle{
        vertical-align: middle
    }
    .header-task-monitor .cycle .task-cycle-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: center;
        font: normal normal normal 14px/16px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor .priority-title{
        vertical-align: middle
    }

    .header-task-monitor .priority-title .priority-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: center;
        font: normal normal normal 14px/16px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor .approval-title{
        vertical-align: middle;
        text-align: center;
        font: normal normal normal 12px/14px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }

    .hover-table{
        background-color: white !important;
    }
    .hover-table:hover{
        background-color: #f4f6f9 !important;
    }

    .edge-of-state{
        background: white;
        position: relative;
        border-radius: 8px;
        vertical-align: middle;
    }
    .edge-of-state .customer-state-of-edge{
        position: absolute;
        left:-1.8em;
        background:white;
        width: 5px;
        height: 30px;
        border-radius: 0 3px 3px 0;
    }
    .name-state{
        text-align: left;
        font: normal normal normal 16px/18px 'Source Sans Pro';
        color: #FFFFFF;
        width: 130px;
        vertical-align: middle!important;
    }
    .table td, .table th {
        padding: 0.75rem;
        vertical-align: middle!important;
        border-top: 1px solid #dee2e6;
    }
    .showTask .name{
        text-align: left;
        font: normal normal normal 14px/16px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #777777;
        opacity: 1;
    }
    .showTask .img-state{
        text-align: left;
        font: normal normal normal 16px/18px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #414141;
        opacity: 1;
    }
    .start-date{
        text-align: center;
        font: normal normal normal 16px/18px 'Source Sans Pro';
        color: #414141;
    }
    .date-end{
        text-align: center;
        font: normal normal normal 16px/18px 'Source Sans Pro';
        color: #414141;
    }
}
@media (min-width: 1300px) and (max-width: 1400px){
    /**Menú*/
    .navbar {
        background: #FFFFFF 0% 0% no-repeat padding-box!important;
        box-shadow: 0px 3px 5px #8E8E8E29;
        opacity: 1;
        height: 103px;
    }
    .navbar .navbar-brand .savmanagemnet-logo{
        max-width: 230px;
        max-height: 33px;
    }
    .navbar .img-customer{
        text-align: right;
        margin-right: 10%;
    }
    .navbar .img-customer .logo-customer{
        max-width: 100px;
        max-height: 50px;
    }
    .d-flex{
        width: 20%;
        text-align: right;
        margin-right: -7%;
    }
    .d-flex .close-section{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #646464;
        opacity: 1;
        border-radius: 10px;
        padding: 6px 13px 6px 13px;
        text-decoration: none!important;
        margin-top: 6px;
        text-align: center;
        font: normal normal 600 16px/20px 'Source Sans Pro';
        color: #4E4E4E;
    }
    .d-flex .close-section:hover{
        background: #E8E8E8 0% 0% no-repeat padding-box;
        border: 1px solid #646464;
        opacity: 1;
        border-radius: 10px;
        padding: 6px 13px 6px 13px;
        text-decoration: none!important;
        margin-top: 6px;
        text-align: center;
        font: normal normal 600 16px/20px 'Source Sans Pro';
        color: #4E4E4E;
    }
    .navbar .vl{
        border-left: 1px solid #CCCCCC;
        height: 40px;
        position: absolute;
        left: 84.5%;
        top: 35%;
    }

    /**Buscar*/

    .task-monitor-search{
        margin-top: 30px;
    }
    .task-monitor-search .form-control{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #C4C4C4!important;
        border-radius: 5px!important;
        color: #AAAAAA!important;
        opacity: 1;
        margin-left: 3%;
        margin-right: 3%;
        padding: 1.3em 2em 1.3em 2em;
    }
    .task-monitor-search>input:focus {
        outline:none !important;
        outline-width: 0 !important;
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        border: 1px solid #C4C4C4;
    }

    /**Resultados y actualizar*/
    .help-block{
        text-align: left;
        font: normal normal normal 20px/27px "Source Sans Pro";
        letter-spacing: 0px;
        color: #707070!important;
        opacity: 1;
        margin-left: 2.5%;
    }
    .number{
        margin-top: -1.7em;
        text-align: center;
        color: #FFFFFF;
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0;
        padding: 2px 6px 2px 6px;
    }

    #button_filter{
        background: #3F62A8 0% 0% no-repeat padding-box!important;
        border-radius: 5px;
        padding: 8px 15px 8px 15px!important;
        text-decoration: none!important;
        border: none!important;
        text-align: center;
        font: normal normal normal 18px/22px 'Source Sans Pro'!important;
        color: #FFFFFF!important;
        margin-right: 1em;
        margin-top: 0.5em;
        margin-bottom: 0.5em;
    }
    #button_filter:hover{
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 3s; /* don't forget to set a duration! */
    }
    #filter-panel{
        height: auto;
        position: absolute;
        width: 99.25%;
        z-index: 99;
        margin-top: -25px;
        margin-left: 1%;
        padding-right: 2.7em;
        padding-top: 25px;
    }
    .filter-panel-body{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        box-shadow: 0px 4px 6px #51515129;
        border-radius: 5px;
    }
    .filter-panel-body:before{
        content: "";
        position: absolute;
        top: -11.5px;
        right: 11.5em;
        width: 0;
        height: 0;
        border-width: 0 35px 35px;
        border-style: solid;
        border-color: transparent transparent #FFFFFF;
    }
    .filter-panel-body .dropdown-menu{
        border: transparent!important;
        background: #FFFFFF 0% 0% no-repeat padding-box!important;
        box-shadow: 0px 4px 6px #51515129!important;
    }
    .filter-panel-body .states-title{
        margin-left: 2.5em;
        padding-top: 2em;
    }
    .filter-panel-body .states-title>h1{
        text-align: left;
        font: normal normal 600 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
    }
    .filter-panel-body .filter-states{
        margin-top: 1.7em;
    }
    .filter-panel-body .filter-states .state_checkbox{
        margin-left: 2.5em;
    }

    .filter-panel-body>hr {
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
        border: 0;
        border-top: 1px solid #f3f2f2 !important;
        width: 95%;
    }

    .filter-panel-body .date_title{
        margin-left: 2.5em;
        margin-bottom: 1em;
    }
    .filter-panel-body .date_title>h1{
        text-align: left;
        font: normal normal 600 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
    }
    .filter-panel-body .separator{
        text-align: left;
        font: normal normal normal 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
        margin-top: 0.3em;
        margin-left: -9.3em;
    }
    .filter-panel-body .start_date{
        text-align: left;
        font: normal normal normal 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
        border: 2px solid #D2D2D2;
        border-radius: 5px;
        width: 188px;
        height: 46px;
        margin-left: 1.5em;
    }

    .filter-panel-body .icon-start-at{
        margin-top: -2.9em;
        margin-left: 10.9em;
        border: none!important;
        background: none!important;
    }
    .filter-panel-body .end_date{
        text-align: left;
        font: normal normal normal 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
        border: 2px solid #D2D2D2;
        border-radius: 5px;
        width: 188px;
        height: 46px;
        margin-top: 3em;
        margin-left: -5.8em;
    }
    .filter-panel-body .icon-end-at{
        margin-top: -2.9em;
        margin-left: 1.7em;
        border: none!important;
        background: none!important;
    }
    .filter-panel-body .priority-title{
        margin-bottom: 1em;
    }
    .filter-panel-body .priority-title>h1{
        text-align: left;
        font: normal normal 600 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
    }

    .filter-panel-body .clean-filters{
        margin-left: 4.8em;
        padding-top: 0.9em;
    }
    .filter-panel-body .clean-filters .title{
        text-align: left;
        font: normal 600 normal 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #FF3434;
        cursor: pointer;
    }
    .filter-panel-body .clean-filters .title:hover{
        color:  #FF3434!important;
    }
    .filter-panel-body .filter-button{
        text-align: right;
        margin-left: -4.5em;
        margin-bottom: 2em;
        margin-top: 0.3rem;
    }
    .filter-panel-body .filter-button .close-filter{
        text-align: center;
        font: normal normal normal 18px/24px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #3F62A8;
        border: 2px solid #3F62A8;
        border-radius: 5px;
        padding: 8px 10px 8px 10px;
    }
    .filter-panel-body .filter-button .close-filter:hover{
        text-align: center;
        font: normal normal normal 18px/24px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #3F62A8;
        opacity: 1;
        background: #ffffff 0% 0% no-repeat padding-box;
        border: 2px solid #3F62A8;
        border-radius: 5px;
        padding: 8px 10px 8px 10px;
        box-shadow: 0px 0px 5px rgba(108, 108, 108, 0.39);
    }

    .filter-panel-body .filter-button .apply-filter{
        text-align: center;
        font: normal normal normal 18px/24px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #FFFFFF;
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 5px;
        padding: 9px 15px 9px 15px;
        margin-left: 1em;
    }
    .filter-panel-body .filter-button .apply-filter:hover{
        text-align: center;
        letter-spacing: 0px;
        border-radius: 5px;
        padding: 9px 15px 9px 15px;
        background: #3F62A8 0% 0% no-repeat padding-box;
        font: normal normal normal 18px/24px 'Source Sans Pro';
        color: #FFFFFF;
        box-shadow: 0px 0px 6px rgba(108, 108, 108, 0.56);
    }
    .update>a{
        text-align: left;
        font: normal normal 600 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070!important;
        opacity: 1;
        margin-right: 1.3em;
    }
    .update>button{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        opacity: 1;
        border-radius: 5px;
        padding: 8px 15px 8px 15px;
        text-decoration: none!important;
        margin-top: 6px;
        text-align: center;
        font: normal normal 600 18px/23px 'Source Sans Pro';
        color: #707070;
    }
    .update>a{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        opacity: 1;
        border-radius: 5px;
        padding: 8px 15px 8px 15px;
        text-decoration: none!important;
        margin-top: 6px;
        text-align: center;
        font: normal normal 600 18px/23px 'Source Sans Pro';
        color: #707070;
    }
    .update>a:hover{
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 3s; /* don't forget to set a duration! */
    }
    /**body table*/
    .header-task-monitor{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        opacity: 1;
    }
    .header-task-monitor .text-center{
        padding: 15px 0px!important;
    }
    .header-task-monitor .customer{
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
        padding: 0px 0px 0px 15px;
    }
    .priority-class-customer-1{
        background: #6594FF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        margin-left: 20%;
        margin-right: 20%;
        padding-top: 2%;
        padding-bottom: 3%;
        text-align: center;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
    }
    .priority-class-customer-2{
        background: #1A3D8F 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        margin-left: 30%;
        margin-right: 30%;
        padding-top: 2%;
        padding-bottom: 3%;
    }
    .priority-class-customer-3{
        background: #757575 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        margin-left: 25%;
        margin-right: 25%;
        padding-top: 2%;
        padding-bottom: 3%;
    }
    .priority-class-customer-4{
        background: #FF6665 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        margin-left: 30%;
        margin-right: 30%;
        padding-top: 2%;
        padding-bottom: 3%;
    }
    .priority-class-customer-5{
        background: #FF3434 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        margin-left: 20%;
        margin-right: 20%;
        padding-top: 2%;
        padding-bottom: 3%;
    }

    .state-class-custom-8{
        background: #FF6D5D 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-2{
        background: #8B8B8B 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-3{
        background: #36B980 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-4{
        background: #1BA198 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-5{
        background: #5D9EFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-6{
        background: #FF5D5D 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-7{
        background: #FFAE36 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-1{
        background: #2D2D2D 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-9{
        background: #F456FF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-10{
        background: #5D7DFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-11{
        background: #685DFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }

    .days-task{
        text-align: center;
        font: normal normal normal 14px/18px Source Sans Pro;
        letter-spacing: 0px;
        color: #FFFFFF;
        opacity: 1;
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 5px;
        margin-left: 28%;
        margin-right: 28%;
        padding-top: 3%;
        padding-bottom: 4%;
    }
    .undo-evaluate {
        text-decoration: none !important;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF !important;
    }
    .undo-button-evaluate {
        background: #FFB114 0% 0% no-repeat padding-box;
        box-shadow: 0px 2px 4px #00000029;
        border-radius: 5px;
        opacity: 1;
        cursor: pointer;
        padding-left: 50px;
    }
    .undo-button-evaluate:hover{
        background: #FFB114 0% 0% no-repeat padding-box;
        box-shadow: 0px 2px 4px #00000029;
        border-radius: 5px;
        opacity: 1;
        cursor: pointer;
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 1s; /* don't forget to set a duration! */
    }
    .evaluate{
        text-decoration: none!important;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF!important;
        opacity: 1;
        padding-left: 13px;
    }
    .button-evaluate{
        background: #7896FB 0% 0% no-repeat padding-box;
        box-shadow: 0px 2px 4px #00000029;
        border-radius: 5px;
        opacity: 1;
    }
    .button-evaluate:hover{
        background: #7896FB 0% 0% no-repeat padding-box;
        box-shadow: 0px 2px 4px #00000029;
        border-radius: 5px;
        opacity: 1;
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 1s; /* don't forget to set a duration! */
    }
    .img-evaluate{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    /**Modal dialog*/
    .modal-dialog .modal-content .modal-body .modal-card{
        box-shadow: 0px 0px 6px #00000029;
        border-radius: 5px;
        opacity: 1;
        width: 320px;
        height: 334px;
        margin-left: 12%;
        margin-top: 3%;
        margin-bottom: 3%;
    }
    .modal-dialog .modal-content .modal-body .two-modal-card{
        box-shadow: 0px 0px 6px #00000029;
        border-radius: 5px;
        opacity: 1;
        width: 320px;
        height: 334px;
        margin-left: 2%;
        margin-top: 3%;
        margin-bottom: 3%;
    }
    .modal-dialog .modal-content .modal-body .modal-card .text-modal-monitor{
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
        padding-left: 7%;
        padding-right: 7%;
    }
    .modal-dialog .modal-content .modal-body .two-modal-card .text-modal-monitor{
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
        padding-left: 7%;
        padding-right: 7%;
    }
    .modal-dialog .modal-content .modal-body .modal-card .text-modal-monitor .bold-text{
        text-align: center;
        font: normal normal 600 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
    }
    .modal-dialog .modal-content .modal-body .two-modal-card .text-modal-monitor .bold-text{
        text-align: center;
        font: normal normal 600 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
    }
    .modal-dialog .modal-content .modal-header .modal-title{
        text-align: left;
        font: normal normal 600 24px/20px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3F62A8;
        opacity: 1;
        margin-top: 0.2em;
        margin-left: -19em;
    }
    .modal-dialog .modal-content .modal-header{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        box-shadow: 0px 1px 5px #5B5B5B29;
        border-radius: 10px 10px 0px 0px;
        opacity: 1;
    }
    .modal-dialog .modal-content .modal-body>p{
        text-align: left;
        font: normal normal normal 20px/25px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
        opacity: 1;
        padding-left: 6%;
        padding-right: 8%;
        margin-top: 1%;
    }
    .modal-dialog .modal-content .modal-footer .cancel-modal-approval{
        text-align: center;
        font: normal normal 600 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3F62A8;
        text-shadow:  0px 3px 6px #FFFFFF29;
        opacity: 1;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #3F62A8;
        border-radius: 5px;
        padding: 6px 10px 6px 10px;
    }
    .modal-dialog .modal-content .modal-footer .cancel-modal-approval:hover{
        text-align: center;
        font: normal normal 600 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3F62A8;
        opacity: 1;
        background: #ffffff 0% 0% no-repeat padding-box;
        border: 1px solid #3F62A8;
        border-radius: 5px;
        padding: 6px 10px 6px 10px;
        box-shadow: 0px 0px 5px rgba(108, 108, 108, 0.39);
    }
    .modal-dialog .modal-content .modal-footer .confirm-modal-approval{
        text-align: center;
        letter-spacing: 0px;
        opacity: 1;
        border: 1px solid #3F62A8;
        border-radius: 5px;
        padding: 6px 10px 6px 10px;
        background: #3F62A8 0% 0% no-repeat padding-box;
        font: normal normal normal 18px/23px "Source Sans Pro";
        color: #FFFFFF;
        text-shadow:  0px 3px 6px #FFFFFF29;
    }
    .modal-dialog .modal-content .modal-footer .confirm-modal-approval:hover{
        text-align: center;
        letter-spacing: 0px;
        opacity: 1;
        border: 1px solid #4168B6FF;
        border-radius: 5px;
        padding: 6px 10px 6px 10px;
        background: #4168b6 0% 0% no-repeat padding-box;
        font: normal normal normal 18px/23px "Source Sans Pro";
        color: #FFFFFF;
        box-shadow: 0px 0px 6px rgba(108, 108, 108, 0.56);
    }
    .modal-dialog .modal-content{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border-radius: 10px;
        opacity: 1;
    }

    .active{
        background: #f4f6f9!important;

    }

    .modal-dialog .modal-content .modal-body .title-one{
        text-align: left;
        font: normal normal normal 20px/25px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
        margin-top: 5%;
        margin-left: 23%;
    }
    .modal-dialog .modal-content .modal-body .title-two{
        text-align: left;
        font: italic normal 600 20px/25px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #484848;
        margin-left: 23%;
    }
    .modal-dialog .modal-content .modal-body .body-one{
        margin-top: 4%;
        background: #E8EDFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        text-align: left;
        font: normal normal bold 16px/20px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #212E58;
        opacity: 1;
        margin-right: 19.5em;
        padding-left: 2%;
        margin-left: 23%;
    }
    .modal-dialog .modal-content .modal-body .body-two{
        text-align: left;
        font: normal normal normal 16px/20px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #484848;
        margin-top: 3%;
        margin-right: 5%;
        margin-left: 23%;
    }

    .modal-dialog .modal-content .modal-body .body-three{
        text-align: left;
        font: normal normal 600 16px/20px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
        margin-right: 5%;
    }
    .modal-dialog .modal-content .modal-body .body-four{
        text-align: left;
        font: normal normal normal 16px/20px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #484848;
        margin-top: 2%;
        margin-right: 5%;
        margin-left: 23%;
    }

    /**table*/
    .accent-fuchsia .page-item.active .page-link {
        background-color: #FFFFFF!important;
        border: none!important;
        color: black;!important;
    }
    .accent-fuchsia .page-item{
        margin: 0.2em;
    }
    .accent-fuchsia .page-item .page-link {
        background-color: #ECECEC!important;
        border: none!important;
        color: black;!important;
        border-radius: 100%;
        width: 100%;
    }
    .accent-fuchsia .page-item .page-link:hover {
        background-color: #E2E2E2!important;
        border: none!important;
        color: black;!important;
        border-radius: 100%;
        width: 100%;
    }
    table, tr, td{
        border:none!important;
    }
    table, thead, th{
        border: none!important;
    }


    /**Modal secciones*/
    .three-modal-title{
        text-align: left;
        font: normal normal 600 24px/20px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3F62A8!important;
        opacity: 1;
        margin-left:3%;
        margin-top: -0.8em;
    }
    .form-control-8{
        background: #FF6D5D 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 220px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 65%;
        margin-top: -1.9em
    }
    .form-control-2{
        background: #8B8B8B 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 120px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 73.5%;
        margin-top: -1.9em
    }
    .form-control-3{
        background: #36B980 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 120px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 73.5%;
        margin-top: -1.9em
    }
    .form-control-4{
        background: #1BA198 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 235px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 63.5%;
        margin-top: -1.9em
    }
    .form-control-5{
        background: #5D9EFF 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 160px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 70%;
        margin-top: -1.9em
    }
    .form-control-6{
        background: #FF5D5D 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 180px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 68%;
        margin-top: -1.9em
    }
    .form-control-7{
        background: #FFAE36 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 230px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 64.5%;
        margin-top: -1.9em
    }
    .form-control-1{
        background: #2D2D2D 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 190px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 67.5%;
        margin-top: -1.9em
    }
    .form-control-9{
        background: #F456FF 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 250px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 62.5%;
        margin-top: -1.9em
    }
    .form-control-10{
        background: #5D7DFF 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 140px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 72%;
        margin-top: -1.9em
    }
    .form-control-11{
        background: #685DFF 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 90px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 76%;
        margin-top: -1.9em
    }
    .modal-body{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        box-shadow: 0px 1px 5px #5B5B5B29;
        border-radius: 10px 10px 0px 0px;
        opacity: 1;
        padding-bottom: 2%;
    }
    .modal-text-section .section{
        border-right: 1px solid #D2D2D2;
        transition: all 0.5s;
        padding-right: 16px;
        word-break: break-all;
    }
    .modal-text-section .section .section-title{
        text-align: left;
        font: normal normal 600 22px/28px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #484848;
        opacity: 1;
        margin-top: 5%;
        margin-left: 10%;
        margin-bottom: 2%
    }
    .modal-text-section .vl{
        border: 1px solid #D2D2D2;
        height: 894px;
        position: absolute;
        left: 94%;
        margin-left: -3px;
        top: 0;
    }
    .modal-text-section .line{
        border: 1px solid #D2D2D2;
        height: 894px;
        position: absolute;
        left: 99%;
        margin-left: -3px;
        top: 0;
    }
    .modal-text-section .date{
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #4A4A4A;
        opacity: 1;
        margin-left: 4%;
        margin-top: 4%;
    }
    .modal-text-section .section-evaluate{
        background: #7896FB 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        width: 120px;
        height: 35px;
        padding-top: 5px;
        margin-left: 75%;
        margin-top: -3em;
        text-align: center;
    }
    .modal-text-section .section-evaluate:hover{
        background: #7896FB 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        width: 120px;
        height: 35px;
        padding-top: 5px;
        margin-left: 75%;
        margin-top: -3em;
        text-align: center;
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 1s; /* don't forget to set a duration! */
    }
    .modal-text-section .section-undo-evaluate{
        background: #FFB114 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        width: 180px;
        height: 35px;
        padding-top: 5px;
        margin-left: 69%;
        margin-top: -3em;
        text-align: center;
    }
    .modal-text-section .sections-evaluate{
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF!important;
        opacity: 1;
        text-decoration: none!important;
    }
    .modal-text-section .section-undo-evaluate:hover{
        background: #FFB114 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        width: 180px;
        height: 35px;
        padding-top: 5px;
        margin-left: 69%;
        margin-top: -3em;
        text-align: center;
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 1s; /* don't forget to set a duration! */
    }
    .modal-text-section .valign-middle-img{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        width: 120px;
        height: 35px;
        padding-top: 5px;
        margin-left: 79.5%;
        margin-top: -3em;
    }
    .modal-text-section .option_{
        margin-bottom: 0.6em;
        margin-top: 0.6em;
        margin-right: 5%;
    }
    .modal-text-section .option_:hover{
        background: #CCCCCC;
    }
    .modal-text-section .active-button{
        background: #F1F1F1;
    }
    .modal-text-section .dropdown-item:active {
        color: #fff;
        text-decoration: none;
        background-color: #F1F1F1;
    }

    /**Linea centro*/
    .center_line>div{
        border: 1px solid #D2D2D2;
        opacity: 1;
        margin-right: 4%;
        margin-left: 2%;
    }
    .center_line{
        margin: 25px;
    }
    .modal-text-section .title{
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #222E58;
        opacity: 1;
        cursor: pointer;
    }
    .modal-text-section .title:hover{
        color: #222E58;
        cursor: pointer;
    }

    /***/
    .dropdown-toggle .title{
        margin-left: 20%;
        background: #FFFFFF;
    }
    .footer{
        text-align: right;
        margin-left: 48em;
        margin-bottom: 1em;
    }
    .footer>button{
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        padding: 10px 20px 10px 20px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        text-shadow: 0px 3px 6px #FFFFFF29;
        border: 1px solid #4168B6FF;
        box-shadow: 0px 0px 6px transparent;
    }
    .footer>button:hover{
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        padding: 10px 20px 10px 20px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        text-shadow: 0px 3px 6px #FFFFFF29;
        border: 1px solid #4168B6FF;
        box-shadow: 0px 0px 6px rgba(108, 108, 108, 0.56);
    }
    .footer>button:focus{
        outline:none !important;
        outline-width: 0 !important;
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        border: 1px solid #3F62A8;
    }
    .archive-task-monitor{
        background: #F1F1F1  0% 0% no-repeat padding-box;
        box-shadow: 0px 0px 4px #00000029;
        border-radius: 5px;
        opacity: 1;
        margin-left: 20px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3E3E3E!important;
        text-shadow:  0px 3px 6px #FFFFFF29;
        border: none!important;
        padding: 5px 12px 5px 12px;
    }
    .comment-task-monitor{
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848!important;
    }
    .include-task-monitor{
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848!important;
        padding: 2em 2em 2em 2em;
        border-radius: 5px;
        background: #F1F1F1 0% 0% no-repeat padding-box;
        border: 1px solid #E9E9E9;
    }
    .include-task-monitor:hover{
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848!important;
        padding: 2em 2em 2em 2em;
        border-radius: 5px;
        background: #F1F1F1 0% 0% no-repeat padding-box;
        box-shadow: 0px 0px 4px rgba(108, 108, 108, 0.39);
        border: 1px solid #E9E9E9;
    }
    nav svg{
        height: 20px;
    }
    nav span{
        text-align: left;
        font: normal normal normal 20px/27px "Source Sans Pro";
        letter-spacing: 0px;
        color: #707070;
        opacity: 1;
    }


    /**Modal*/

    .not-confirm-on-state-change{
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        letter-spacing: 0px;
        color: #FFFFFF;
        text-shadow:  0px 3px 6px #FFFFFF29;
        width: 90px;
        height: 35px;
        border: 1px solid #4168B6FF;
        padding: 6px 10px 6px 10px;
        background: #4168b6 0% 0% no-repeat padding-box;
        font: normal normal normal 18px/23px "Source Sans Pro";
        box-shadow: 0px 0px 6px transparent;
    }
    .not-confirm-on-state-change:hover{
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        letter-spacing: 0px;
        color: #FFFFFF;
        text-shadow:  0px 3px 6px #FFFFFF29;
        width: 90px;
        height: 35px;
        border: 1px solid #4168B6FF;
        padding: 6px 10px 6px 10px;
        background: #4168b6 0% 0% no-repeat padding-box;
        font: normal normal normal 18px/23px "Source Sans Pro";
        box-shadow: 0px 0px 6px rgba(108, 108, 108, 0.56);
    }
    .not-confirm-on-state-change:focus{
        outline:none !important;
        outline-width: 0 !important;
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        border: 1px solid #3F62A8;
    }
    .confirm-on-state-change {
        font: normal normal 600 18px/23px 'Source Sans Pro';
        color: #3F62A8;
        text-shadow:  0px 3px 6px #FFFFFF29;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #3F62A8;
        border-radius: 5px;
        opacity: 1;
        width: 90px;
        height: 35px;
        margin-top: 20px;
        text-align: center;
        padding: 6px 10px 6px 10px;
    }
    .confirm-on-state-change:hover {
        text-shadow:  0px 3px 6px #FFFFFF29;
        border-radius: 5px;
        opacity: 1;
        width: 90px;
        height: 35px;
        margin-top: 20px;
        text-align: center;
        font: normal normal 600 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3F62A8;
        background: #ffffff 0% 0% no-repeat padding-box;
        border: 1px solid #3F62A8;
        padding: 6px 10px 6px 10px;
        box-shadow: 0px 0px 5px rgba(108, 108, 108, 0.39);
    }
    /** Modal de rechazo  **/
    #undoModal .process{
        font: normal normal 600 18px/23px 'Source Sans Pro';
        color: #474747;
        text-shadow:  0px 3px 6px #FFFFFF29;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #464646;
        border-radius: 5px;
        opacity: 1;
        margin-top: 30px;
        text-align: center;
        padding: 5px 2em 5px 2em;
    }
    /** Calificación**/

    #task_monitor_confirmModal .process{
        font: normal normal 600 18px/23px 'Source Sans Pro';
        color: #3F62A8;
        text-shadow:  0px 3px 6px #3F62A8;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #3F62A8;
        border-radius: 5px;
        opacity: 1;
        margin-top: 40px;
        text-align: center;
        padding: 5px 2em 5px 2em;
    }
    /**
      CUSTOM PAGINATOR
     */
    /**Paginación*/

    .page-item{
        background: #ECECEC!important;
    }
    .page-link{
        text-align: center;
        font: normal normal normal 20px/25px "Source Sans Pro";
        letter-spacing: 0px;
        color: #414141!important;
        opacity: 1;
        margin: 0.5em;
        border-radius: 100%!important;
    }

    .current-page{
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 20px!important;
        opacity: 1;
        color: #FFFFFF;
        padding: 1px 8px 1px 8px;
    }
    .custom_paginator .pagination li.page-item.disabled>span{
        background: #E2E2E2!important;
        color: #414141 !important;
    }
    .custom_paginator .pagination li.page-item.active>span,
    .custom_paginator .pagination li.page-item.active>span{
        text-align: center;
        color: #FFFFFF!important;
        border-radius: 100%!important;
        width: 100%;
        background: #3F62A8!important;
    }

    .custom_paginator .pagination li:first-child>button,
    .custom_paginator .pagination li:first-child>span,
    .custom_paginator .pagination li:last-child>button,
    .custom_paginator .pagination li:last-child>span{
        text-align: center;
        color: #fff0f0!important;
        border-radius: 100%!important;
        max-width: 100%;
        background: #3F62A8!important;
        /*width: 2em!important;*/
    }

    .custom_paginator .pagination li:first-child>button:hover,
    .custom_paginator .pagination li:last-child>button:hover{
        text-align: center;
        color: #FFFFFF!important;
        max-width: 100%;
        border-radius: 100%!important;
        background: #3F62A8!important;
    }

    /**Modal de secciones**/
    .modal-header-section .reloj{
        width: 120px;
        height: 35px;
        border: 1px solid #B8B8B8!important;
        background: #FFFFFF!important;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #757575;
        margin-left: 85.5%;
        margin-top: -2.3em
    }

    .modal-header-section .type-state{
        text-align: center;
        color: #FFFFFF;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        padding-top: 5px
    }
    .modal-header-section .close{
        margin-top: -2.3em;
        margin-right: -1.5%;
    }


    /**Modal Cerrar*/

    /**Linea centro*/
    .modal-close .modal-close .close-line>div{
        border: 1px solid #D2D2D2;
        opacity: 1;
        margin-right: 10%;
        margin-left: 10%;
    }
    .modal-close .modal-close .close-line{
        margin: 25px;
    }

    /**Modal uno*/
    .option_confirm:hover{
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 1s; /* don't forget to set a duration! */
    }
    .form-control:focus{
        outline:none !important;
        outline-width: 0 !important;
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        border: 1px solid #C4C4C4!important;
    }

    /**table customer*/

    .header-task-monitor .state-title{
        width: 5%;
        vertical-align: middle;
    }
    .header-task-monitor .state-title .state-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: center;
        font: normal normal normal 14px/16px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor .customer{
        vertical-align: middle;
    }
    .header-task-monitor .customer .customer-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: left;
        font: normal normal normal 14px/16px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor .start-date{
        vertical-align: middle;
    }
    .header-task-monitor .start-date .start-date-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: center;
        font: normal normal normal 14px/16px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor .end-date{
        vertical-align: middle
    }
    .header-task-monitor .end-date .end-date-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: center;
        font: normal normal normal 14px/16px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor .cycle{
        vertical-align: middle
    }
    .header-task-monitor .cycle .task-cycle-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: center;
        font: normal normal normal 14px/16px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor .priority-title{
        vertical-align: middle
    }

    .header-task-monitor .priority-title .priority-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: center;
        font: normal normal normal 14px/16px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor .approval-title{
        vertical-align: middle;
        text-align: center;
        font: normal normal normal 12px/14px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }

    .hover-table{
        background-color: white !important;
    }
    .hover-table:hover{
        background-color: #f4f6f9 !important;
    }

    .edge-of-state{
        background: white;
        position: relative;
        border-radius: 8px;
    }
    .edge-of-state .customer-state-of-edge{
        position: absolute;
        left:-1.8em;
        top: 10px;
        background:white;
        width: 5px;
        height: 58px;
        border-radius: 0 3px 3px 0;
    }
    .name-state{
        text-align: left;
        font: normal normal normal 18px/22px 'Source Sans Pro';
        color: #FFFFFF;
        padding: 13% 8% 10% 8%;
        width: 171px;
        height: 80px;
        vertical-align: middle!important;
    }
    .showTask .name{
        text-align: left;
        font: normal normal normal 15px/19px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #777777;
        opacity: 1;
    }
    .showTask .img-state{
        text-align: left;
        font: normal normal normal 20px/25px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #414141;
        opacity: 1;
    }
    .start-date{
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        color: #414141;
    }
    .date-end{
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        color: #414141;
    }
}
@media (min-width: 1400px) and (max-width: 1500px){
    /**Menú*/
    .navbar {
        background: #FFFFFF 0% 0% no-repeat padding-box!important;
        box-shadow: 0px 3px 5px #8E8E8E29;
        opacity: 1;
        height: 103px;
    }
    .navbar .navbar-brand .savmanagemnet-logo{
        max-width: 290px;
        max-height: 33px;
    }
    .navbar .img-customer{
        text-align: right;
    }
    .navbar .img-customer .logo-customer{
        max-width: 110px;
        max-height: 53px;
    }
    .d-flex{
        width: 20%;
        text-align: right;
        margin-right: -9%;
    }
    .d-flex .close-section{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #646464;
        opacity: 1;
        border-radius: 10px;
        padding: 6px 13px 6px 13px;
        text-decoration: none!important;
        margin-top: 6px;
        text-align: center;
        font: normal normal 600 16px/20px 'Source Sans Pro';
        color: #4E4E4E;
    }
    .d-flex .close-section:hover{
        background: #E8E8E8 0% 0% no-repeat padding-box;
        border: 1px solid #646464;
        opacity: 1;
        border-radius: 10px;
        padding: 6px 13px 6px 13px;
        text-decoration: none!important;
        margin-top: 6px;
        text-align: center;
        font: normal normal 600 16px/20px 'Source Sans Pro';
        color: #4E4E4E;
    }
    .navbar .vl{
        border-left: 1px solid #CCCCCC;
        height: 40px;
        position: absolute;
        left: 87%;
        top: 35%;
    }

    /**Buscar*/

    .task-monitor-search{
        margin-top: 30px;
    }
    .task-monitor-search .form-control{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #C4C4C4!important;
        border-radius: 5px!important;
        color: #AAAAAA!important;
        opacity: 1;
        margin-left: 2.5%;
        margin-right: 3%;
        padding: 1.3em 2em 1.3em 2em;
    }
    .task-monitor-search>input:focus {
        outline:none !important;
        outline-width: 0 !important;
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        border: 1px solid #C4C4C4;
    }

    /**Resultados y actualizar*/
    .help-block{
        text-align: left;
        font: normal normal normal 20px/27px "Source Sans Pro";
        letter-spacing: 0px;
        color: #707070!important;
        opacity: 1;
        margin-left: 2.5%;
    }
    .number{
        margin-top: -1.7em;
        text-align: center;
        color: #FFFFFF;
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0;
        padding: 2px 6px 2px 6px;
    }

    #button_filter{
        background: #3F62A8 0% 0% no-repeat padding-box!important;
        border-radius: 5px;
        padding: 8px 15px 8px 15px!important;
        text-decoration: none!important;
        border: none!important;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro'!important;
        color: #FFFFFF!important;
        margin-right: 1em;
        margin-top: 0.4em;
        margin-bottom: 0.5em;
    }
    #button_filter:hover{
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 3s; /* don't forget to set a duration! */
    }
    #filter-panel{
        height: auto;
        position: absolute;
        width: 99.25%;
        z-index: 99;
        margin-top: -25px;
        margin-left: 1%;
        padding-right: 2.7em;
        padding-top: 25px;
    }
    .filter-panel-body{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        box-shadow: 0px 4px 6px #51515129;
        border-radius: 5px;
    }
    .filter-panel-body:before{
        content: "";
        position: absolute;
        top: -11.5px;
        right: 11.5em;
        width: 0;
        height: 0;
        border-width: 0 35px 35px;
        border-style: solid;
        border-color: transparent transparent #FFFFFF;
    }
    .filter-panel-body .dropdown-menu{
        border: transparent!important;
        background: #FFFFFF 0% 0% no-repeat padding-box!important;
        box-shadow: 0px 4px 6px #51515129!important;
    }
    .filter-panel-body .states-title{
        margin-left: 4.5em;
        padding-top: 2em;
    }
    .filter-panel-body .states-title>h1{
        text-align: left;
        font: normal normal 600 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
    }
    .filter-panel-body .filter-states{
        margin-top: 1.3em;
    }
    .filter-panel-body .filter-states .state_checkbox{
        margin-left: 4.5em;
    }

    .filter-panel-body>hr {
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
        border: 0;
        border-top: 1px solid #f3f2f2 !important;
        width: 95%;
    }

    .filter-panel-body .date_title{
        margin-left: 4.5em;
        margin-bottom: 1em;
    }
    .filter-panel-body .date_title>h1{
        text-align: left;
        font: normal normal 600 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
    }
    .filter-panel-body .separator{
        text-align: left;
        font: normal normal normal 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
        margin-top: 0.3em;
        margin-left: -4em;
    }
    .filter-panel-body .start_date{
        text-align: left;
        font: normal normal normal 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
        border: 2px solid #D2D2D2;
        border-radius: 5px;
        width: 188px;
        height: 46px;
        margin-left: 3.1em;
    }

    .filter-panel-body .icon-start-at{
        margin-top: -2.9em;
        margin-left: 12.8em;
        border: none!important;
        background: none!important;
    }
    .filter-panel-body .end_date{
        text-align: left;
        font: normal normal normal 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
        border: 2px solid #D2D2D2;
        border-radius: 5px;
        width: 188px;
        height: 46px;
        margin-left: 0.2em;
    }
    .filter-panel-body .icon-end-at{
        margin-top: -2.9em;
        margin-left: 9.3em;
        border: none!important;
        background: none!important;
    }
    .filter-panel-body .priority-title{
        margin-bottom: 1em;
    }
    .filter-panel-body .priority-title>h1{
        text-align: left;
        font: normal normal 600 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
    }

    .filter-panel-body .clean-filters{
        margin-left: 4.8em;
        padding-top: 0.9em;
    }
    .filter-panel-body .clean-filters .title{
        text-align: left;
        font: normal 600 normal 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #FF3434;
        cursor: pointer;
    }
    .filter-panel-body .clean-filters .title:hover{
        color:  #FF3434!important;
    }
    .filter-panel-body .filter-button{
        text-align: right;
        margin-left: -4.5em;
        margin-bottom: 2em;
        margin-top: 0.3rem;
    }
    .filter-panel-body .filter-button .close-filter{
        text-align: center;
        font: normal normal normal 18px/24px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #3F62A8;
        border: 2px solid #3F62A8;
        border-radius: 5px;
        padding: 8px 10px 8px 10px;
    }
    .filter-panel-body .filter-button .close-filter:hover{
        text-align: center;
        font: normal normal normal 18px/24px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #3F62A8;
        opacity: 1;
        background: #ffffff 0% 0% no-repeat padding-box;
        border: 2px solid #3F62A8;
        border-radius: 5px;
        padding: 8px 10px 8px 10px;
        box-shadow: 0px 0px 5px rgba(108, 108, 108, 0.39);
    }

    .filter-panel-body .filter-button .apply-filter{
        text-align: center;
        font: normal normal normal 18px/24px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #FFFFFF;
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 5px;
        padding: 9px 15px 9px 15px;
        margin-left: 1em;
    }
    .filter-panel-body .filter-button .apply-filter:hover{
        text-align: center;
        letter-spacing: 0px;
        border-radius: 5px;
        padding: 9px 15px 9px 15px;
        background: #3F62A8 0% 0% no-repeat padding-box;
        font: normal normal normal 18px/24px 'Source Sans Pro';
        color: #FFFFFF;
        box-shadow: 0px 0px 6px rgba(108, 108, 108, 0.56);
    }
    .update>a{
        text-align: left;
        font: normal normal 600 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070!important;
        opacity: 1;
        margin-right: 1.3em;
    }
    .update>button{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        opacity: 1;
        border-radius: 5px;
        padding: 8px 15px 8px 15px;
        text-decoration: none!important;
        margin-top: 6px;
        text-align: center;
        font: normal normal 600 18px/23px 'Source Sans Pro';
        color: #707070;
    }
    .update>a{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        opacity: 1;
        border-radius: 5px;
        padding: 8px 15px 8px 15px;
        text-decoration: none!important;
        margin-top: 6px;
        text-align: center;
        font: normal normal 600 18px/23px 'Source Sans Pro';
        color: #707070;
    }
    .update>a:hover{
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 3s; /* don't forget to set a duration! */
    }
    /**body table*/
    .header-task-monitor{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        opacity: 1;
    }
    .header-task-monitor .text-center{
        padding: 30px 0px!important;
    }
    .header-task-monitor .customer{
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
        padding: 0px 0px 0px 30px;
    }
    .priority-class-customer-1{
        background: #6594FF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        margin-left: 25%;
        margin-right: 25%;
        padding-top: 2%;
        padding-bottom: 3%;
        text-align: center;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
    }
    .priority-class-customer-2{
        background: #1A3D8F 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        margin-left: 34%;
        margin-right: 34%;
        padding-top: 2%;
        padding-bottom: 3%;
    }
    .priority-class-customer-3{
        background: #757575 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        margin-left: 30%;
        margin-right: 30%;
        padding-top: 2%;
        padding-bottom: 3%;
    }
    .priority-class-customer-4{
        background: #FF6665 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        margin-left: 34%;
        margin-right: 34%;
        padding-top: 2%;
        padding-bottom: 3%;
    }
    .priority-class-customer-5{
        background: #FF3434 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        margin-left: 25%;
        margin-right: 25%;
        padding-top: 2%;
        padding-bottom: 3%;
    }

    .state-class-custom-8{
        background: #FF6D5D 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-2{
        background: #8B8B8B 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-3{
        background: #36B980 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-4{
        background: #1BA198 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-5{
        background: #5D9EFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-6{
        background: #FF5D5D 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-7{
        background: #FFAE36 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-1{
        background: #2D2D2D 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-9{
        background: #F456FF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-10{
        background: #5D7DFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-11{
        background: #685DFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }

    .days-task{
        text-align: center;
        font: normal normal normal 14px/18px Source Sans Pro;
        letter-spacing: 0px;
        color: #FFFFFF;
        opacity: 1;
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 5px;
        margin-left: 28%;
        margin-right: 28%;
        padding-top: 3%;
        padding-bottom: 4%;
    }
    .undo-evaluate {
        text-decoration: none !important;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF !important;
    }
    .undo-button-evaluate {
        background: #FFB114 0% 0% no-repeat padding-box;
        box-shadow: 0px 2px 4px #00000029;
        border-radius: 5px;
        opacity: 1;
        cursor: pointer;
        padding-left: 50px;
    }
    .undo-button-evaluate:hover{
        background: #FFB114 0% 0% no-repeat padding-box;
        box-shadow: 0px 2px 4px #00000029;
        border-radius: 5px;
        opacity: 1;
        cursor: pointer;
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 1s; /* don't forget to set a duration! */
    }
    .evaluate{
        text-decoration: none!important;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF!important;
        opacity: 1;
        padding-left: 13px;
    }
    .button-evaluate{
        background: #7896FB 0% 0% no-repeat padding-box;
        box-shadow: 0px 2px 4px #00000029;
        border-radius: 5px;
        opacity: 1;
    }
    .button-evaluate:hover{
        background: #7896FB 0% 0% no-repeat padding-box;
        box-shadow: 0px 2px 4px #00000029;
        border-radius: 5px;
        opacity: 1;
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 1s; /* don't forget to set a duration! */
    }
    .img-evaluate{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    /**Modal dialog*/
    .modal-dialog .modal-content .modal-body .modal-card{
        box-shadow: 0px 0px 6px #00000029;
        border-radius: 5px;
        opacity: 1;
        width: 320px;
        height: 334px;
        margin-left: 12%;
        margin-top: 3%;
        margin-bottom: 3%;
    }
    .modal-dialog .modal-content .modal-body .two-modal-card{
        box-shadow: 0px 0px 6px #00000029;
        border-radius: 5px;
        opacity: 1;
        width: 320px;
        height: 334px;
        margin-left: 2%;
        margin-top: 3%;
        margin-bottom: 3%;
    }
    .modal-dialog .modal-content .modal-body .modal-card .text-modal-monitor{
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
        padding-left: 7%;
        padding-right: 7%;
    }
    .modal-dialog .modal-content .modal-body .two-modal-card .text-modal-monitor{
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
        padding-left: 7%;
        padding-right: 7%;
    }
    .modal-dialog .modal-content .modal-body .modal-card .text-modal-monitor .bold-text{
        text-align: center;
        font: normal normal 600 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
    }
    .modal-dialog .modal-content .modal-body .two-modal-card .text-modal-monitor .bold-text{
        text-align: center;
        font: normal normal 600 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
    }
    .modal-dialog .modal-content .modal-header .modal-title{
        text-align: left;
        font: normal normal 600 24px/20px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3F62A8;
        opacity: 1;
        margin-top: 0.2em;
        margin-left: -19em;
    }
    .modal-dialog .modal-content .modal-header{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        box-shadow: 0px 1px 5px #5B5B5B29;
        border-radius: 10px 10px 0px 0px;
        opacity: 1;
    }
    .modal-dialog .modal-content .modal-body>p{
        text-align: left;
        font: normal normal normal 20px/25px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
        opacity: 1;
        padding-left: 6%;
        padding-right: 8%;
        margin-top: 1%;
    }
    .modal-dialog .modal-content .modal-footer .cancel-modal-approval{
        text-align: center;
        font: normal normal 600 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3F62A8;
        text-shadow:  0px 3px 6px #FFFFFF29;
        opacity: 1;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #3F62A8;
        border-radius: 5px;
        padding: 6px 10px 6px 10px;
    }
    .modal-dialog .modal-content .modal-footer .cancel-modal-approval:hover{
        text-align: center;
        font: normal normal 600 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3F62A8;
        opacity: 1;
        background: #ffffff 0% 0% no-repeat padding-box;
        border: 1px solid #3F62A8;
        border-radius: 5px;
        padding: 6px 10px 6px 10px;
        box-shadow: 0px 0px 5px rgba(108, 108, 108, 0.39);
    }
    .modal-dialog .modal-content .modal-footer .confirm-modal-approval{
        text-align: center;
        letter-spacing: 0px;
        opacity: 1;
        border: 1px solid #3F62A8;
        border-radius: 5px;
        padding: 6px 10px 6px 10px;
        background: #3F62A8 0% 0% no-repeat padding-box;
        font: normal normal normal 18px/23px "Source Sans Pro";
        color: #FFFFFF;
        text-shadow:  0px 3px 6px #FFFFFF29;
    }
    .modal-dialog .modal-content .modal-footer .confirm-modal-approval:hover{
        text-align: center;
        letter-spacing: 0px;
        opacity: 1;
        border: 1px solid #4168B6FF;
        border-radius: 5px;
        padding: 6px 10px 6px 10px;
        background: #4168b6 0% 0% no-repeat padding-box;
        font: normal normal normal 18px/23px "Source Sans Pro";
        color: #FFFFFF;
        box-shadow: 0px 0px 6px rgba(108, 108, 108, 0.56);
    }
    .modal-dialog .modal-content{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border-radius: 10px;
        opacity: 1;
    }

    .active{
        background: #f4f6f9!important;

    }

    .modal-dialog .modal-content .modal-body .title-one{
        text-align: left;
        font: normal normal normal 20px/25px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
        margin-top: 5%;
        margin-left: 23%;
    }
    .modal-dialog .modal-content .modal-body .title-two{
        text-align: left;
        font: italic normal 600 20px/25px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #484848;
        margin-left: 23%;
    }
    .modal-dialog .modal-content .modal-body .body-one{
        margin-top: 4%;
        background: #E8EDFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        text-align: left;
        font: normal normal bold 16px/20px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #212E58;
        opacity: 1;
        margin-right: 19.5em;
        padding-left: 2%;
        margin-left: 23%;
    }
    .modal-dialog .modal-content .modal-body .body-two{
        text-align: left;
        font: normal normal normal 16px/20px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #484848;
        margin-top: 3%;
        margin-right: 5%;
        margin-left: 23%;
    }

    .modal-dialog .modal-content .modal-body .body-three{
        text-align: left;
        font: normal normal 600 16px/20px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
        margin-right: 5%;
    }
    .modal-dialog .modal-content .modal-body .body-four{
        text-align: left;
        font: normal normal normal 16px/20px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #484848;
        margin-top: 2%;
        margin-right: 5%;
        margin-left: 23%;
    }

    /**table*/
    .accent-fuchsia .page-item.active .page-link {
        background-color: #FFFFFF!important;
        border: none!important;
        color: black;!important;
    }
    .accent-fuchsia .page-item{
        margin: 0.2em;
    }
    .accent-fuchsia .page-item .page-link {
        background-color: #ECECEC!important;
        border: none!important;
        color: black;!important;
        border-radius: 100%;
        width: 100%;
    }
    .accent-fuchsia .page-item .page-link:hover {
        background-color: #E2E2E2!important;
        border: none!important;
        color: black;!important;
        border-radius: 100%;
        width: 100%;
    }
    table, tr, td{
        border:none!important;
    }
    table, thead, th{
        border: none!important;
    }


    /**Modal secciones*/
    .three-modal-title{
        text-align: left;
        font: normal normal 600 24px/20px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3F62A8!important;
        opacity: 1;
        margin-left:3%;
        margin-top: -0.8em;
    }
    .form-control-8{
        background: #FF6D5D 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 220px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 68.5%;
        margin-top: -1.9em
    }
    .form-control-2{
        background: #8B8B8B 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 120px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 76%;
        margin-top: -1.9em
    }
    .form-control-3{
        background: #36B980 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 120px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 76%;
        margin-top: -1.9em
    }
    .form-control-4{
        background: #1BA198 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 235px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 67%;
        margin-top: -1.9em
    }
    .form-control-5{
        background: #5D9EFF 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 160px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 73%;
        margin-top: -1.9em
    }
    .form-control-6{
        background: #FF5D5D 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 180px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 71.5%;
        margin-top: -1.9em
    }
    .form-control-7{
        background: #FFAE36 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 230px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 67.5%;
        margin-top: -1.9em
    }
    .form-control-1{
        background: #2D2D2D 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 190px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 70.5%;
        margin-top: -1.9em
    }
    .form-control-9{
        background: #F456FF 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 250px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 66%;
        margin-top: -1.9em
    }
    .form-control-10{
        background: #5D7DFF 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 140px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 74.5%;
        margin-top: -1.9em
    }
    .form-control-11{
        background: #685DFF 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 90px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 78.5%;
        margin-top: -1.9em
    }
    .modal-body{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        box-shadow: 0px 1px 5px #5B5B5B29;
        border-radius: 10px 10px 0px 0px;
        opacity: 1;
        padding-bottom: 2%;
    }
    .modal-text-section .section{
        border-right: 1px solid #D2D2D2;
        transition: all 0.5s;
        padding-right: 16px;
        word-break: break-all;
    }
    .modal-text-section .section .section-title{
        text-align: left;
        font: normal normal 600 22px/28px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #484848;
        opacity: 1;
        margin-top: 5%;
        margin-left: 10%;
        margin-bottom: 2%
    }
    .modal-text-section .vl{
        border: 1px solid #D2D2D2;
        height: 894px;
        position: absolute;
        left: 94%;
        margin-left: -3px;
        top: 0;
    }
    .modal-text-section .line{
        border: 1px solid #D2D2D2;
        height: 894px;
        position: absolute;
        left: 99%;
        margin-left: -3px;
        top: 0;
    }
    .modal-text-section .date{
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #4A4A4A;
        opacity: 1;
        margin-left: 4%;
        margin-top: 4%;
    }
    .modal-text-section .section-evaluate{
        background: #7896FB 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        width: 120px;
        height: 35px;
        padding-top: 5px;
        margin-left: 77.5%;
        margin-top: -3em;
        text-align: center;
    }
    .modal-text-section .section-evaluate:hover{
        background: #7896FB 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        width: 120px;
        height: 35px;
        padding-top: 5px;
        margin-left: 77.5%;
        margin-top: -3em;
        text-align: center;
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 1s; /* don't forget to set a duration! */
    }
    .modal-text-section .section-undo-evaluate{
        background: #FFB114 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        width: 180px;
        height: 35px;
        padding-top: 5px;
        margin-left: 72%;
        margin-top: -3em;
        text-align: center;
    }
    .modal-text-section .sections-evaluate{
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF!important;
        opacity: 1;
        text-decoration: none!important;
    }
    .modal-text-section .section-undo-evaluate:hover{
        background: #FFB114 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        width: 180px;
        height: 35px;
        padding-top: 5px;
        margin-left: 72%;
        margin-top: -3em;
        text-align: center;
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 1s; /* don't forget to set a duration! */
    }
    .modal-text-section .valign-middle-img{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        width: 120px;
        height: 35px;
        padding-top: 5px;
        margin-left: 81.5%;
        margin-top: -3em;
    }
    .modal-text-section .option_{
        margin-bottom: 0.6em;
        margin-top: 0.6em;
        margin-right: 5%;
    }
    .modal-text-section .option_:hover{
        background: #CCCCCC;
    }
    .modal-text-section .active-button{
        background: #F1F1F1;
    }
    .modal-text-section .dropdown-item:active {
        color: #fff;
        text-decoration: none;
        background-color: #F1F1F1;
    }

    /**Linea centro*/
    .center_line>div{
        border: 1px solid #D2D2D2;
        opacity: 1;
        margin-right: 4%;
        margin-left: 2%;
    }
    .center_line{
        margin: 25px;
    }
    .modal-text-section .title{
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #222E58;
        opacity: 1;
        cursor: pointer;
    }
    .modal-text-section .title:hover{
        color: #222E58;
        cursor: pointer;
    }

    /***/
    .dropdown-toggle .title{
        margin-left: 20%;
        background: #FFFFFF;
    }
    .footer{
        text-align: right;
        margin-left: 48em;
        margin-bottom: 1em;
    }
    .footer>button{
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        padding: 10px 20px 10px 20px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        text-shadow: 0px 3px 6px #FFFFFF29;
        border: 1px solid #4168B6FF;
        box-shadow: 0px 0px 6px transparent;
    }
    .footer>button:hover{
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        padding: 10px 20px 10px 20px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        text-shadow: 0px 3px 6px #FFFFFF29;
        border: 1px solid #4168B6FF;
        box-shadow: 0px 0px 6px rgba(108, 108, 108, 0.56);
    }
    .footer>button:focus{
        outline:none !important;
        outline-width: 0 !important;
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        border: 1px solid #3F62A8;
    }
    .archive-task-monitor{
        background: #F1F1F1  0% 0% no-repeat padding-box;
        box-shadow: 0px 0px 4px #00000029;
        border-radius: 5px;
        opacity: 1;
        margin-left: 20px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3E3E3E!important;
        text-shadow:  0px 3px 6px #FFFFFF29;
        border: none!important;
        padding: 5px 12px 5px 12px;
    }
    .comment-task-monitor{
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848!important;
    }
    .include-task-monitor{
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848!important;
        padding: 2em 2em 2em 2em;
        border-radius: 5px;
        background: #F1F1F1 0% 0% no-repeat padding-box;
        border: 1px solid #E9E9E9;
    }
    .include-task-monitor:hover{
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848!important;
        padding: 2em 2em 2em 2em;
        border-radius: 5px;
        background: #F1F1F1 0% 0% no-repeat padding-box;
        box-shadow: 0px 0px 4px rgba(108, 108, 108, 0.39);
        border: 1px solid #E9E9E9;
    }
    nav svg{
        height: 20px;
    }
    nav span{
        text-align: left;
        font: normal normal normal 20px/27px "Source Sans Pro";
        letter-spacing: 0px;
        color: #707070;
        opacity: 1;
    }


    /**Modal*/

    .not-confirm-on-state-change{
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        letter-spacing: 0px;
        color: #FFFFFF;
        text-shadow:  0px 3px 6px #FFFFFF29;
        width: 90px;
        height: 35px;
        border: 1px solid #4168B6FF;
        padding: 6px 10px 6px 10px;
        background: #4168b6 0% 0% no-repeat padding-box;
        font: normal normal normal 18px/23px "Source Sans Pro";
        box-shadow: 0px 0px 6px transparent;
    }
    .not-confirm-on-state-change:hover{
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        letter-spacing: 0px;
        color: #FFFFFF;
        text-shadow:  0px 3px 6px #FFFFFF29;
        width: 90px;
        height: 35px;
        border: 1px solid #4168B6FF;
        padding: 6px 10px 6px 10px;
        background: #4168b6 0% 0% no-repeat padding-box;
        font: normal normal normal 18px/23px "Source Sans Pro";
        box-shadow: 0px 0px 6px rgba(108, 108, 108, 0.56);
    }
    .not-confirm-on-state-change:focus{
        outline:none !important;
        outline-width: 0 !important;
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        border: 1px solid #3F62A8;
    }
    .confirm-on-state-change {
        font: normal normal 600 18px/23px 'Source Sans Pro';
        color: #3F62A8;
        text-shadow:  0px 3px 6px #FFFFFF29;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #3F62A8;
        border-radius: 5px;
        opacity: 1;
        width: 90px;
        height: 35px;
        margin-top: 20px;
        text-align: center;
        padding: 6px 10px 6px 10px;
    }
    .confirm-on-state-change:hover {
        text-shadow:  0px 3px 6px #FFFFFF29;
        border-radius: 5px;
        opacity: 1;
        width: 90px;
        height: 35px;
        margin-top: 20px;
        text-align: center;
        font: normal normal 600 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3F62A8;
        background: #ffffff 0% 0% no-repeat padding-box;
        border: 1px solid #3F62A8;
        padding: 6px 10px 6px 10px;
        box-shadow: 0px 0px 5px rgba(108, 108, 108, 0.39);
    }
    /** Modal de rechazo  **/
    #undoModal .process{
        font: normal normal 600 18px/23px 'Source Sans Pro';
        color: #474747;
        text-shadow:  0px 3px 6px #FFFFFF29;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #464646;
        border-radius: 5px;
        opacity: 1;
        margin-top: 30px;
        text-align: center;
        padding: 5px 2em 5px 2em;
    }
    /** Calificación**/

    #task_monitor_confirmModal .process{
        font: normal normal 600 18px/23px 'Source Sans Pro';
        color: #3F62A8;
        text-shadow:  0px 3px 6px #3F62A8;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #3F62A8;
        border-radius: 5px;
        opacity: 1;
        margin-top: 40px;
        text-align: center;
        padding: 5px 2em 5px 2em;
    }
    /**
      CUSTOM PAGINATOR
     */
    /**Paginación*/

    .page-item{
        background: #ECECEC!important;
    }
    .page-link{
        text-align: center;
        font: normal normal normal 20px/25px "Source Sans Pro";
        letter-spacing: 0px;
        color: #414141!important;
        opacity: 1;
        margin: 0.5em;
        border-radius: 100%!important;
    }

    .current-page{
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 20px!important;
        opacity: 1;
        color: #FFFFFF;
        padding: 1px 8px 1px 8px;
    }
    .custom_paginator .pagination li.page-item.disabled>span{
        background: #E2E2E2!important;
        color: #414141 !important;
    }
    .custom_paginator .pagination li.page-item.active>span,
    .custom_paginator .pagination li.page-item.active>span{
        text-align: center;
        color: #FFFFFF!important;
        border-radius: 100%!important;
        width: 100%;
        background: #3F62A8!important;
    }

    .custom_paginator .pagination li:first-child>button,
    .custom_paginator .pagination li:first-child>span,
    .custom_paginator .pagination li:last-child>button,
    .custom_paginator .pagination li:last-child>span{
        text-align: center;
        color: #fff0f0!important;
        border-radius: 100%!important;
        max-width: 100%;
        background: #3F62A8!important;
        /*width: 2em!important;*/
    }

    .custom_paginator .pagination li:first-child>button:hover,
    .custom_paginator .pagination li:last-child>button:hover{
        text-align: center;
        color: #FFFFFF!important;
        max-width: 100%;
        border-radius: 100%!important;
        background: #3F62A8!important;
    }

    /**Modal de secciones**/
    .modal-header-section .reloj{
        width: 120px;
        height: 35px;
        border: 1px solid #B8B8B8!important;
        background: #FFFFFF!important;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #757575;
        margin-left: 87%;
        margin-top: -2.3em
    }

    .modal-header-section .type-state{
        text-align: center;
        color: #FFFFFF;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        padding-top: 5px
    }
    .modal-header-section .close{
        margin-top: -2.3em;
        margin-right: -1.5%;
    }


    /**Modal Cerrar*/

    /**Linea centro*/
    .modal-close .modal-close .close-line>div{
        border: 1px solid #D2D2D2;
        opacity: 1;
        margin-right: 10%;
        margin-left: 10%;
    }
    .modal-close .modal-close .close-line{
        margin: 25px;
    }

    /**Modal uno*/
    .option_confirm:hover{
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 1s; /* don't forget to set a duration! */
    }
    .form-control:focus{
        outline:none !important;
        outline-width: 0 !important;
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        border: 1px solid #C4C4C4!important;
    }

    /**table customer*/

    .header-task-monitor  .state-title{
        width: 5%;
        vertical-align: middle;
    }
    .header-task-monitor  .state-title .state-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor  .customer{
        vertical-align: middle;
    }
    .header-task-monitor  .customer .customer-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor  .start-date{
        vertical-align: middle;
    }
    .header-task-monitor  .start-date .start-date-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor  .end-date{
        vertical-align: middle
    }
    .header-task-monitor  .end-date .end-date-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor  .cycle{
        vertical-align: middle
    }
    .header-task-monitor  .cycle .task-cycle-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor  .priority-title{
        vertical-align: middle
    }

    .header-task-monitor .priority-title .priority-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor .approval-title{
        vertical-align: middle;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }

    .hover-table{
        background-color: white !important;
    }
    .hover-table:hover{
        background-color: #f4f6f9 !important;
    }

    .edge-of-state{
        background: white;
        position: relative;
        border-radius: 8px;
        vertical-align: middle;
    }
    .edge-of-state .customer-state-of-edge{
        position: absolute;
        left:-1.8em;
        top: 5px;
        background:white;
        width: 5px;
        height: 30px;
        border-radius: 0 3px 3px 0;
    }
    .name-state{
        text-align: left;
        font: normal normal normal 18px/22px 'Source Sans Pro';
        color: #FFFFFF;
        width: 151px;
        vertical-align: middle!important;
    }
    .table td, .table th {
        padding: 0.75rem;
        vertical-align: middle!important;
        border-top: 1px solid #dee2e6;
    }
    .showTask .name{
        text-align: left;
        font: normal normal normal 15px/19px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #777777;
        opacity: 1;
    }
    .showTask .img-state{
        text-align: left;
        font: normal normal normal 20px/25px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #414141;
        opacity: 1;
    }
    .start-date{
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        color: #414141;
    }
    .date-end{
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        color: #414141;
    }
}
@media (min-width: 1500px) and (max-width: 1600px){
    /**Menú*/
    .navbar {
        background: #FFFFFF 0% 0% no-repeat padding-box!important;
        box-shadow: 0px 3px 5px #8E8E8E29;
        opacity: 1;
        height: 103px;
    }
    .navbar .navbar-brand .savmanagemnet-logo{
        max-width: 290px;
        max-height: 33px;
    }
    .navbar .img-customer{
        text-align: right;
    }
    .navbar .img-customer .logo-customer{
        max-width: 110px;
        max-height: 53px;
    }
    .d-flex{
        width: 20%;
        text-align: right;
        margin-right: -9%;
    }
    .d-flex .close-section{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #646464;
        opacity: 1;
        border-radius: 10px;
        padding: 6px 13px 6px 13px;
        text-decoration: none!important;
        margin-top: 6px;
        text-align: center;
        font: normal normal 600 16px/20px 'Source Sans Pro';
        color: #4E4E4E;
    }
    .d-flex .close-section:hover{
        background: #E8E8E8 0% 0% no-repeat padding-box;
        border: 1px solid #646464;
        opacity: 1;
        border-radius: 10px;
        padding: 6px 13px 6px 13px;
        text-decoration: none!important;
        margin-top: 6px;
        text-align: center;
        font: normal normal 600 16px/20px 'Source Sans Pro';
        color: #4E4E4E;
    }
    .navbar .vl{
        border-left: 1px solid #CCCCCC;
        height: 40px;
        position: absolute;
        left: 87%;
        top: 35%;
    }

    /**Buscar*/

    .task-monitor-search{
        margin-top: 30px;
    }
    .task-monitor-search .form-control{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #C4C4C4!important;
        border-radius: 5px!important;
        color: #AAAAAA!important;
        opacity: 1;
        margin-left: 2.5%;
        margin-right: 3%;
        padding: 1.3em 2em 1.3em 2em;
    }
    .task-monitor-search>input:focus {
        outline:none !important;
        outline-width: 0 !important;
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        border: 1px solid #C4C4C4;
    }

    /**Resultados y actualizar*/
    .help-block{
        text-align: left;
        font: normal normal normal 20px/27px "Source Sans Pro";
        letter-spacing: 0px;
        color: #707070!important;
        opacity: 1;
        margin-left: 2.5%;
    }
    .number{
        margin-top: -1.7em;
        text-align: center;
        color: #FFFFFF;
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0;
        padding: 2px 6px 2px 6px;
    }

    #button_filter{
        background: #3F62A8 0% 0% no-repeat padding-box!important;
        border-radius: 5px;
        padding: 8px 15px 8px 15px!important;
        text-decoration: none!important;
        border: none!important;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro'!important;
        color: #FFFFFF!important;
        margin-right: 1em;
        margin-top: 0.4em;
        margin-bottom: 0.5em;
    }
    #button_filter:hover{
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 3s; /* don't forget to set a duration! */
    }
    #filter-panel{
        height: auto;
        position: absolute;
        width: 99.25%;
        z-index: 99;
        margin-top: -25px;
        margin-left: 1%;
        padding-right: 2.7em;
        padding-top: 25px;
    }
    .filter-panel-body{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        box-shadow: 0px 4px 6px #51515129;
        border-radius: 5px;
    }
    .filter-panel-body:before{
        content: "";
        position: absolute;
        top: -11.5px;
        right: 11.5em;
        width: 0;
        height: 0;
        border-width: 0 35px 35px;
        border-style: solid;
        border-color: transparent transparent #FFFFFF;
    }
    .filter-panel-body .dropdown-menu{
        border: transparent!important;
        background: #FFFFFF 0% 0% no-repeat padding-box!important;
        box-shadow: 0px 4px 6px #51515129!important;
    }
    .filter-panel-body .states-title{
        margin-left: 4.5em;
        padding-top: 2em;
    }
    .filter-panel-body .states-title>h1{
        text-align: left;
        font: normal normal 600 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
    }
    .filter-panel-body .filter-states{
        margin-top: 1.3em;
    }
    .filter-panel-body .filter-states .state_checkbox{
        margin-left: 4.5em;
    }

    .filter-panel-body>hr {
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
        border: 0;
        border-top: 1px solid #f3f2f2 !important;
        width: 95%;
    }

    .filter-panel-body .date_title{
        margin-left: 4.5em;
        margin-bottom: 1em;
    }
    .filter-panel-body .date_title>h1{
        text-align: left;
        font: normal normal 600 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
    }
    .filter-panel-body .separator{
        text-align: left;
        font: normal normal normal 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
        margin-top: 0.3em;
        margin-left: -4em;
    }
    .filter-panel-body .start_date{
        text-align: left;
        font: normal normal normal 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
        border: 2px solid #D2D2D2;
        border-radius: 5px;
        width: 188px;
        height: 46px;
        margin-left: 3.1em;
    }

    .filter-panel-body .icon-start-at{
        margin-top: -2.9em;
        margin-left: 12.8em;
        border: none!important;
        background: none!important;
    }
    .filter-panel-body .end_date{
        text-align: left;
        font: normal normal normal 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
        border: 2px solid #D2D2D2;
        border-radius: 5px;
        width: 188px;
        height: 46px;
        margin-left: 0.2em;
    }
    .filter-panel-body .icon-end-at{
        margin-top: -2.9em;
        margin-left: 9.3em;
        border: none!important;
        background: none!important;
    }
    .filter-panel-body .priority-title{
        margin-bottom: 1em;
    }
    .filter-panel-body .priority-title>h1{
        text-align: left;
        font: normal normal 600 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
    }

    .filter-panel-body .clean-filters{
        margin-left: 4.8em;
        padding-top: 0.9em;
    }
    .filter-panel-body .clean-filters .title{
        text-align: left;
        font: normal 600 normal 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #FF3434;
        cursor: pointer;
    }
    .filter-panel-body .clean-filters .title:hover{
        color:  #FF3434!important;
    }
    .filter-panel-body .filter-button{
        text-align: right;
        margin-left: -4.5em;
        margin-bottom: 2em;
        margin-top: 0.3rem;
    }
    .filter-panel-body .filter-button .close-filter{
        text-align: center;
        font: normal normal normal 18px/24px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #3F62A8;
        border: 2px solid #3F62A8;
        border-radius: 5px;
        padding: 8px 10px 8px 10px;
    }
    .filter-panel-body .filter-button .close-filter:hover{
        text-align: center;
        font: normal normal normal 18px/24px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #3F62A8;
        opacity: 1;
        background: #ffffff 0% 0% no-repeat padding-box;
        border: 2px solid #3F62A8;
        border-radius: 5px;
        padding: 8px 10px 8px 10px;
        box-shadow: 0px 0px 5px rgba(108, 108, 108, 0.39);
    }

    .filter-panel-body .filter-button .apply-filter{
        text-align: center;
        font: normal normal normal 18px/24px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #FFFFFF;
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 5px;
        padding: 9px 15px 9px 15px;
        margin-left: 1em;
    }
    .filter-panel-body .filter-button .apply-filter:hover{
        text-align: center;
        letter-spacing: 0px;
        border-radius: 5px;
        padding: 9px 15px 9px 15px;
        background: #3F62A8 0% 0% no-repeat padding-box;
        font: normal normal normal 18px/24px 'Source Sans Pro';
        color: #FFFFFF;
        box-shadow: 0px 0px 6px rgba(108, 108, 108, 0.56);
    }
    .update>a{
        text-align: left;
        font: normal normal 600 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070!important;
        opacity: 1;
        margin-right: 1.3em;
    }
    .update>button{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        opacity: 1;
        border-radius: 5px;
        padding: 8px 15px 8px 15px;
        text-decoration: none!important;
        margin-top: 6px;
        text-align: center;
        font: normal normal 600 18px/23px 'Source Sans Pro';
        color: #707070;
    }
    .update>a{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        opacity: 1;
        border-radius: 5px;
        padding: 8px 15px 8px 15px;
        text-decoration: none!important;
        margin-top: 6px;
        text-align: center;
        font: normal normal 600 18px/23px 'Source Sans Pro';
        color: #707070;
    }
    .update>a:hover{
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 3s; /* don't forget to set a duration! */
    }
    /**body table*/
    .header-task-monitor{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        opacity: 1;
    }
    .header-task-monitor .text-center{
       padding: 30px 0px;
    }
    .header-task-monitor .customer{
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
        padding: 0px 0px 0px 30px;
    }
    .priority-class-customer-1{
        background: #6594FF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        margin-left: 30%;
        margin-right: 30%;
        padding-top: 2%;
        padding-bottom: 3%;
        text-align: center;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
    }
    .priority-class-customer-2{
        background: #1A3D8F 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        margin-left: 37%;
        margin-right: 37%;
        padding-top: 2%;
        padding-bottom: 3%;
    }
    .priority-class-customer-3{
        background: #757575 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        margin-left: 32%;
        margin-right: 32%;
        padding-top: 2%;
        padding-bottom: 3%;
    }
    .priority-class-customer-4{
        background: #FF6665 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        margin-left: 37%;
        margin-right: 37%;
        padding-top: 2%;
        padding-bottom: 3%;
    }
    .priority-class-customer-5{
        background: #FF3434 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        margin-left: 30%;
        margin-right: 30%;
        padding-top: 2%;
        padding-bottom: 3%;
    }

    .state-class-custom-8{
        background: #FF6D5D 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-2{
        background: #8B8B8B 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-3{
        background: #36B980 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-4{
        background: #1BA198 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-5{
        background: #5D9EFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-6{
        background: #FF5D5D 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-7{
        background: #FFAE36 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-1{
        background: #2D2D2D 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-9{
        background: #F456FF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-10{
        background: #5D7DFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-11{
        background: #685DFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }

    .days-task{
        text-align: center;
        font: normal normal normal 14px/18px Source Sans Pro;
        letter-spacing: 0px;
        color: #FFFFFF;
        opacity: 1;
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 5px;
        margin-left: 28%;
        margin-right: 28%;
        padding-top: 3%;
        padding-bottom: 4%;
    }
    .undo-evaluate {
        text-decoration: none !important;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF !important;
    }
    .undo-button-evaluate {
        background: #FFB114 0% 0% no-repeat padding-box;
        box-shadow: 0px 2px 4px #00000029;
        border-radius: 5px;
        opacity: 1;
        cursor: pointer;
        padding-left: 50px;
    }
    .undo-button-evaluate:hover{
        background: #FFB114 0% 0% no-repeat padding-box;
        box-shadow: 0px 2px 4px #00000029;
        border-radius: 5px;
        opacity: 1;
        cursor: pointer;
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 1s; /* don't forget to set a duration! */
    }
    .evaluate{
        text-decoration: none!important;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF!important;
        opacity: 1;
        padding-left: 13px;
    }
    .button-evaluate{
        background: #7896FB 0% 0% no-repeat padding-box;
        box-shadow: 0px 2px 4px #00000029;
        border-radius: 5px;
        opacity: 1;
    }
    .button-evaluate:hover{
        background: #7896FB 0% 0% no-repeat padding-box;
        box-shadow: 0px 2px 4px #00000029;
        border-radius: 5px;
        opacity: 1;
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 1s; /* don't forget to set a duration! */
    }
    .img-evaluate{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    /**Modal dialog*/
    .modal-dialog .modal-content .modal-body .modal-card{
        box-shadow: 0px 0px 6px #00000029;
        border-radius: 5px;
        opacity: 1;
        width: 320px;
        height: 334px;
        margin-left: 12%;
        margin-top: 3%;
        margin-bottom: 3%;
    }
    .modal-dialog .modal-content .modal-body .two-modal-card{
        box-shadow: 0px 0px 6px #00000029;
        border-radius: 5px;
        opacity: 1;
        width: 320px;
        height: 334px;
        margin-left: 2%;
        margin-top: 3%;
        margin-bottom: 3%;
    }
    .modal-dialog .modal-content .modal-body .modal-card .text-modal-monitor{
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
        padding-left: 7%;
        padding-right: 7%;
    }
    .modal-dialog .modal-content .modal-body .two-modal-card .text-modal-monitor{
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
        padding-left: 7%;
        padding-right: 7%;
    }
    .modal-dialog .modal-content .modal-body .modal-card .text-modal-monitor .bold-text{
        text-align: center;
        font: normal normal 600 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
    }
    .modal-dialog .modal-content .modal-body .two-modal-card .text-modal-monitor .bold-text{
        text-align: center;
        font: normal normal 600 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
    }
    .modal-dialog .modal-content .modal-header .modal-title{
        text-align: left;
        font: normal normal 600 24px/20px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3F62A8;
        opacity: 1;
        margin-top: 0.2em;
        margin-left: -19em;
    }
    .modal-dialog .modal-content .modal-header{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        box-shadow: 0px 1px 5px #5B5B5B29;
        border-radius: 10px 10px 0px 0px;
        opacity: 1;
    }
    .modal-dialog .modal-content .modal-body>p{
        text-align: left;
        font: normal normal normal 20px/25px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
        opacity: 1;
        padding-left: 6%;
        padding-right: 8%;
        margin-top: 1%;
    }
    .modal-dialog .modal-content .modal-footer .cancel-modal-approval{
        text-align: center;
        font: normal normal 600 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3F62A8;
        text-shadow:  0px 3px 6px #FFFFFF29;
        opacity: 1;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #3F62A8;
        border-radius: 5px;
        padding: 6px 10px 6px 10px;
    }
    .modal-dialog .modal-content .modal-footer .cancel-modal-approval:hover{
        text-align: center;
        font: normal normal 600 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3F62A8;
        opacity: 1;
        background: #ffffff 0% 0% no-repeat padding-box;
        border: 1px solid #3F62A8;
        border-radius: 5px;
        padding: 6px 10px 6px 10px;
        box-shadow: 0px 0px 5px rgba(108, 108, 108, 0.39);
    }
    .modal-dialog .modal-content .modal-footer .confirm-modal-approval{
        text-align: center;
        letter-spacing: 0px;
        opacity: 1;
        border: 1px solid #3F62A8;
        border-radius: 5px;
        padding: 6px 10px 6px 10px;
        background: #3F62A8 0% 0% no-repeat padding-box;
        font: normal normal normal 18px/23px "Source Sans Pro";
        color: #FFFFFF;
        text-shadow:  0px 3px 6px #FFFFFF29;
    }
    .modal-dialog .modal-content .modal-footer .confirm-modal-approval:hover{
        text-align: center;
        letter-spacing: 0px;
        opacity: 1;
        border: 1px solid #4168B6FF;
        border-radius: 5px;
        padding: 6px 10px 6px 10px;
        background: #4168b6 0% 0% no-repeat padding-box;
        font: normal normal normal 18px/23px "Source Sans Pro";
        color: #FFFFFF;
        box-shadow: 0px 0px 6px rgba(108, 108, 108, 0.56);
    }
    .modal-dialog .modal-content{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border-radius: 10px;
        opacity: 1;
    }

    .active{
        background: #f4f6f9!important;

    }

    .modal-dialog .modal-content .modal-body .title-one{
        text-align: left;
        font: normal normal normal 20px/25px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
        margin-top: 5%;
        margin-left: 23%;
    }
    .modal-dialog .modal-content .modal-body .title-two{
        text-align: left;
        font: italic normal 600 20px/25px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #484848;
        margin-left: 23%;
    }
    .modal-dialog .modal-content .modal-body .body-one{
        margin-top: 4%;
        background: #E8EDFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        text-align: left;
        font: normal normal bold 16px/20px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #212E58;
        opacity: 1;
        margin-right: 19.5em;
        padding-left: 2%;
        margin-left: 23%;
    }
    .modal-dialog .modal-content .modal-body .body-two{
        text-align: left;
        font: normal normal normal 16px/20px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #484848;
        margin-top: 3%;
        margin-right: 5%;
        margin-left: 23%;
    }

    .modal-dialog .modal-content .modal-body .body-three{
        text-align: left;
        font: normal normal 600 16px/20px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
        margin-right: 5%;
    }
    .modal-dialog .modal-content .modal-body .body-four{
        text-align: left;
        font: normal normal normal 16px/20px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #484848;
        margin-top: 2%;
        margin-right: 5%;
        margin-left: 23%;
    }

    /**table*/
    .accent-fuchsia .page-item.active .page-link {
        background-color: #FFFFFF!important;
        border: none!important;
        color: black;!important;
    }
    .accent-fuchsia .page-item{
        margin: 0.2em;
    }
    .accent-fuchsia .page-item .page-link {
        background-color: #ECECEC!important;
        border: none!important;
        color: black;!important;
        border-radius: 100%;
        width: 100%;
    }
    .accent-fuchsia .page-item .page-link:hover {
        background-color: #E2E2E2!important;
        border: none!important;
        color: black;!important;
        border-radius: 100%;
        width: 100%;
    }
    table, tr, td{
        border:none!important;
    }
    table, thead, th{
        border: none!important;
    }


    /**Modal secciones*/
    .three-modal-title{
        text-align: left;
        font: normal normal 600 24px/20px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3F62A8!important;
        opacity: 1;
        margin-left:3%;
        margin-top: -0.8em;
    }
    .form-control-8{
        background: #FF6D5D 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 220px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 69.5%;
        margin-top: -1.9em
    }
    .form-control-2{
        background: #8B8B8B 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 120px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 77%;
        margin-top: -1.9em
    }
    .form-control-3{
        background: #36B980 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 120px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 77%;
        margin-top: -1.9em
    }
    .form-control-4{
        background: #1BA198 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 235px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 68.5%;
        margin-top: -1.9em
    }
    .form-control-5{
        background: #5D9EFF 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 160px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 74%;
        margin-top: -1.9em
    }
    .form-control-6{
        background: #FF5D5D 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 180px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 72.5%;
        margin-top: -1.9em
    }
    .form-control-7{
        background: #FFAE36 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 230px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 69%;
        margin-top: -1.9em
    }
    .form-control-1{
        background: #2D2D2D 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 190px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 71.5%;
        margin-top: -1.9em
    }
    .form-control-9{
        background: #F456FF 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 250px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 67.5%;
        margin-top: -1.9em
    }
    .form-control-10{
        background: #5D7DFF 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 140px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 75.5%;
        margin-top: -1.9em
    }
    .form-control-11{
        background: #685DFF 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 90px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 79.5%;
        margin-top: -1.9em
    }
    .modal-body{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        box-shadow: 0px 1px 5px #5B5B5B29;
        border-radius: 10px 10px 0px 0px;
        opacity: 1;
        padding-bottom: 2%;
    }
    .modal-text-section .section{
        border-right: 1px solid #D2D2D2;
        transition: all 0.5s;
        padding-right: 16px;
        word-break: break-all;
    }
    .modal-text-section .section .section-title{
        text-align: left;
        font: normal normal 600 22px/28px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #484848;
        opacity: 1;
        margin-top: 5%;
        margin-left: 10%;
        margin-bottom: 2%
    }
    .modal-text-section .vl{
        border: 1px solid #D2D2D2;
        height: 894px;
        position: absolute;
        left: 94%;
        margin-left: -3px;
        top: 0;
    }
    .modal-text-section .line{
        border: 1px solid #D2D2D2;
        height: 894px;
        position: absolute;
        left: 99%;
        margin-left: -3px;
        top: 0;
    }
    .modal-text-section .date{
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #4A4A4A;
        opacity: 1;
        margin-left: 4%;
        margin-top: 4%;
    }
    .modal-text-section .section-evaluate{
        background: #7896FB 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        width: 120px;
        height: 35px;
        padding-top: 5px;
        margin-left: 78%;
        margin-top: -3em;
        text-align: center;
    }
    .modal-text-section .section-evaluate:hover{
        background: #7896FB 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        width: 120px;
        height: 35px;
        padding-top: 5px;
        margin-left: 78%;
        margin-top: -3em;
        text-align: center;
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 1s; /* don't forget to set a duration! */
    }
    .modal-text-section .section-undo-evaluate{
        background: #FFB114 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        width: 180px;
        height: 35px;
        padding-top: 5px;
        margin-left: 72.5%;
        margin-top: -3em;
        text-align: center;
    }
    .modal-text-section .sections-evaluate{
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF!important;
        opacity: 1;
        text-decoration: none!important;
    }
    .modal-text-section .section-undo-evaluate:hover{
        background: #FFB114 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        width: 180px;
        height: 35px;
        padding-top: 5px;
        margin-left: 72.5%;
        margin-top: -3em;
        text-align: center;
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 1s; /* don't forget to set a duration! */
    }
    .modal-text-section .valign-middle-img{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        width: 120px;
        height: 35px;
        padding-top: 5px;
        margin-left: 82%;
        margin-top: -3em;
    }
    .modal-text-section .option_{
        margin-bottom: 0.6em;
        margin-top: 0.6em;
        margin-right: 5%;
    }
    .modal-text-section .option_:hover{
        background: #CCCCCC;
    }
    .modal-text-section .active-button{
        background: #F1F1F1;
    }
    .modal-text-section .dropdown-item:active {
        color: #fff;
        text-decoration: none;
        background-color: #F1F1F1;
    }

    /**Linea centro*/
    .center_line>div{
        border: 1px solid #D2D2D2;
        opacity: 1;
        margin-right: 4%;
        margin-left: 2%;
    }
    .center_line{
        margin: 25px;
    }
    .modal-text-section .title{
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #222E58;
        opacity: 1;
        cursor: pointer;
    }
    .modal-text-section .title:hover{
        color: #222E58;
        cursor: pointer;
    }

    /***/
    .dropdown-toggle .title{
        margin-left: 20%;
        background: #FFFFFF;
    }
    .footer{
        text-align: right;
        margin-left: 48em;
        margin-bottom: 1em;
    }
    .footer>button{
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        padding: 10px 20px 10px 20px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        text-shadow: 0px 3px 6px #FFFFFF29;
        border: 1px solid #4168B6FF;
        box-shadow: 0px 0px 6px transparent;
    }
    .footer>button:hover{
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        padding: 10px 20px 10px 20px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        text-shadow: 0px 3px 6px #FFFFFF29;
        border: 1px solid #4168B6FF;
        box-shadow: 0px 0px 6px rgba(108, 108, 108, 0.56);
    }
    .footer>button:focus{
        outline:none !important;
        outline-width: 0 !important;
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        border: 1px solid #3F62A8;
    }
    .archive-task-monitor{
        background: #F1F1F1  0% 0% no-repeat padding-box;
        box-shadow: 0px 0px 4px #00000029;
        border-radius: 5px;
        opacity: 1;
        margin-left: 20px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3E3E3E!important;
        text-shadow:  0px 3px 6px #FFFFFF29;
        border: none!important;
        padding: 5px 12px 5px 12px;
    }
    .comment-task-monitor{
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848!important;
    }
    .include-task-monitor{
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848!important;
        padding: 2em 2em 2em 2em;
        border-radius: 5px;
        background: #F1F1F1 0% 0% no-repeat padding-box;
        border: 1px solid #E9E9E9;
    }
    .include-task-monitor:hover{
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848!important;
        padding: 2em 2em 2em 2em;
        border-radius: 5px;
        background: #F1F1F1 0% 0% no-repeat padding-box;
        box-shadow: 0px 0px 4px rgba(108, 108, 108, 0.39);
        border: 1px solid #E9E9E9;
    }
    nav svg{
        height: 20px;
    }
    nav span{
        text-align: left;
        font: normal normal normal 20px/27px "Source Sans Pro";
        letter-spacing: 0px;
        color: #707070;
        opacity: 1;
    }


    /**Modal*/

    .not-confirm-on-state-change{
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        letter-spacing: 0px;
        color: #FFFFFF;
        text-shadow:  0px 3px 6px #FFFFFF29;
        width: 90px;
        height: 35px;
        border: 1px solid #4168B6FF;
        padding: 6px 10px 6px 10px;
        background: #4168b6 0% 0% no-repeat padding-box;
        font: normal normal normal 18px/23px "Source Sans Pro";
        box-shadow: 0px 0px 6px transparent;
    }
    .not-confirm-on-state-change:hover{
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        letter-spacing: 0px;
        color: #FFFFFF;
        text-shadow:  0px 3px 6px #FFFFFF29;
        width: 90px;
        height: 35px;
        border: 1px solid #4168B6FF;
        padding: 6px 10px 6px 10px;
        background: #4168b6 0% 0% no-repeat padding-box;
        font: normal normal normal 18px/23px "Source Sans Pro";
        box-shadow: 0px 0px 6px rgba(108, 108, 108, 0.56);
    }
    .not-confirm-on-state-change:focus{
        outline:none !important;
        outline-width: 0 !important;
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        border: 1px solid #3F62A8;
    }
    .confirm-on-state-change {
        font: normal normal 600 18px/23px 'Source Sans Pro';
        color: #3F62A8;
        text-shadow:  0px 3px 6px #FFFFFF29;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #3F62A8;
        border-radius: 5px;
        opacity: 1;
        width: 90px;
        height: 35px;
        margin-top: 20px;
        text-align: center;
        padding: 6px 10px 6px 10px;
    }
    .confirm-on-state-change:hover {
        text-shadow:  0px 3px 6px #FFFFFF29;
        border-radius: 5px;
        opacity: 1;
        width: 90px;
        height: 35px;
        margin-top: 20px;
        text-align: center;
        font: normal normal 600 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3F62A8;
        background: #ffffff 0% 0% no-repeat padding-box;
        border: 1px solid #3F62A8;
        padding: 6px 10px 6px 10px;
        box-shadow: 0px 0px 5px rgba(108, 108, 108, 0.39);
    }
    /** Modal de rechazo  **/
    #undoModal .process{
        font: normal normal 600 18px/23px 'Source Sans Pro';
        color: #474747;
        text-shadow:  0px 3px 6px #FFFFFF29;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #464646;
        border-radius: 5px;
        opacity: 1;
        margin-top: 30px;
        text-align: center;
        padding: 5px 2em 5px 2em;
    }
    /** Calificación**/

    #task_monitor_confirmModal .process{
        font: normal normal 600 18px/23px 'Source Sans Pro';
        color: #3F62A8;
        text-shadow:  0px 3px 6px #3F62A8;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #3F62A8;
        border-radius: 5px;
        opacity: 1;
        margin-top: 40px;
        text-align: center;
        padding: 5px 2em 5px 2em;
    }
    /**
      CUSTOM PAGINATOR
     */
    /**Paginación*/

    .page-item{
        background: #ECECEC!important;
    }
    .page-link{
        text-align: center;
        font: normal normal normal 20px/25px "Source Sans Pro";
        letter-spacing: 0px;
        color: #414141!important;
        opacity: 1;
        margin: 0.5em;
        border-radius: 100%!important;
    }

    .current-page{
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 20px!important;
        opacity: 1;
        color: #FFFFFF;
        padding: 1px 8px 1px 8px;
    }
    .custom_paginator .pagination li.page-item.disabled>span{
        background: #E2E2E2!important;
        color: #414141 !important;
    }
    .custom_paginator .pagination li.page-item.active>span,
    .custom_paginator .pagination li.page-item.active>span{
        text-align: center;
        color: #FFFFFF!important;
        border-radius: 100%!important;
        width: 100%;
        background: #3F62A8!important;
    }

    .custom_paginator .pagination li:first-child>button,
    .custom_paginator .pagination li:first-child>span,
    .custom_paginator .pagination li:last-child>button,
    .custom_paginator .pagination li:last-child>span{
        text-align: center;
        color: #fff0f0!important;
        border-radius: 100%!important;
        max-width: 100%;
        background: #3F62A8!important;
        /*width: 2em!important;*/
    }

    .custom_paginator .pagination li:first-child>button:hover,
    .custom_paginator .pagination li:last-child>button:hover{
        text-align: center;
        color: #FFFFFF!important;
        max-width: 100%;
        border-radius: 100%!important;
        background: #3F62A8!important;
    }

    /**Modal de secciones**/
    .modal-header-section .reloj{
        width: 120px;
        height: 35px;
        border: 1px solid #B8B8B8!important;
        background: #FFFFFF!important;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #757575;
        margin-left: 87%;
        margin-top: -2.3em
    }

    .modal-header-section .type-state{
        text-align: center;
        color: #FFFFFF;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        padding-top: 5px
    }
    .modal-header-section .close{
        margin-top: -2.3em;
        margin-right: -1.5%;
    }


    /**Modal Cerrar*/

    /**Linea centro*/
    .modal-close .modal-close .close-line>div{
        border: 1px solid #D2D2D2;
        opacity: 1;
        margin-right: 10%;
        margin-left: 10%;
    }
    .modal-close .modal-close .close-line{
        margin: 25px;
    }

    /**Modal uno*/
    .option_confirm:hover{
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 1s; /* don't forget to set a duration! */
    }
    .form-control:focus{
        outline:none !important;
        outline-width: 0 !important;
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        border: 1px solid #C4C4C4!important;
    }

    /**table customer*/

    .header-task-monitor .state-title{
        width: 5%;
        vertical-align: middle;
    }
    .header-task-monitor .state-title .state-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor .customer{
        vertical-align: middle;
    }
    .header-task-monitor .customer .customer-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor .start-date{
        vertical-align: middle;
    }
    .header-task-monitor .start-date .start-date-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor .end-date{
        vertical-align: middle
    }
    .header-task-monitor .end-date .end-date-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor .cycle{
        vertical-align: middle
    }
    .header-task-monitor .cycle .task-cycle-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor .priority-title{
        vertical-align: middle
    }

    .header-task-monitor .priority-title .priority-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor .approval-title{
        vertical-align: middle;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }

    .hover-table{
        background-color: white !important;
    }
    .hover-table:hover{
        background-color: #f4f6f9 !important;
    }

    .edge-of-state{
        background: white;
        position: relative;
        border-radius: 8px;
    }
    .edge-of-state .customer-state-of-edge{
        position: absolute;
        left:-1.8em;
        top: 10px;
        background:white;
        width: 5px;
        height: 60px;
        border-radius: 0 3px 3px 0;
    }
    .table td, .table th {
        padding: 0.75rem;
        vertical-align: middle!important;
        border-top: 1px solid #dee2e6;
    }
    .name-state{
        text-align: left;
        font: normal normal normal 18px/22px 'Source Sans Pro';
        color: #FFFFFF;
        width: 171px;
        padding-top: 25px;
        padding-bottom: 25px;
        vertical-align: middle!important;
    }
    .showTask .name{
        text-align: left;
        font: normal normal normal 15px/19px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #777777;
        opacity: 1;
    }
    .showTask .img-state{
        text-align: left;
        font: normal normal normal 20px/25px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #414141;
        opacity: 1;
    }
    .start-date{
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        color: #414141;
    }
    .date-end{
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        color: #414141;
    }
}
@media (min-width: 1600px) and (max-width: 1700px){
    /**Menú*/
    .navbar {
        background: #FFFFFF 0% 0% no-repeat padding-box!important;
        box-shadow: 0px 3px 5px #8E8E8E29;
        opacity: 1;
        height: 103px;
    }
    .navbar .navbar-brand .savmanagemnet-logo{
        max-width: 290px;
        max-height: 33px;
    }
    .navbar .img-customer{
        text-align: right;
    }
    .navbar .img-customer .logo-customer{
        max-width: 110px;
        max-height: 53px;
    }
    .d-flex{
        width: 20%;
        text-align: right;
        margin-right: -10.5%;
    }
    .d-flex .close-section{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #646464;
        opacity: 1;
        border-radius: 10px;
        padding: 6px 13px 6px 13px;
        text-decoration: none!important;
        margin-top: 6px;
        text-align: center;
        font: normal normal 600 16px/20px 'Source Sans Pro';
        color: #4E4E4E;
    }
    .d-flex .close-section:hover{
        background: #E8E8E8 0% 0% no-repeat padding-box;
        border: 1px solid #646464;
        opacity: 1;
        border-radius: 10px;
        padding: 6px 13px 6px 13px;
        text-decoration: none!important;
        margin-top: 6px;
        text-align: center;
        font: normal normal 600 16px/20px 'Source Sans Pro';
        color: #4E4E4E;
    }
    .navbar .vl{
        border-left: 1px solid #CCCCCC;
        height: 40px;
        position: absolute;
        left: 88.2%;
        top: 35%;
    }

    /**Buscar*/

    .task-monitor-search{
        margin-top: 30px;
    }
    .task-monitor-search .form-control{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #C4C4C4!important;
        border-radius: 5px!important;
        color: #AAAAAA!important;
        opacity: 1;
        margin-left: 2.4%;
        margin-right: 2.4%;
        padding: 1.3em 2em 1.3em 2em;
    }
    .task-monitor-search>input:focus {
        outline:none !important;
        outline-width: 0 !important;
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        border: 1px solid #C4C4C4;
    }

    /**Resultados y actualizar*/
    .help-block{
        text-align: left;
        font: normal normal normal 20px/27px "Source Sans Pro";
        letter-spacing: 0px;
        color: #707070!important;
        opacity: 1;
        margin-left: 2.5%;
    }
    .number{
        margin-top: -1.7em;
        text-align: center;
        color: #FFFFFF;
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0;
        padding: 2px 6px 2px 6px;
    }

    #button_filter{
        background: #3F62A8 0% 0% no-repeat padding-box!important;
        border-radius: 5px;
        padding: 8px 15px 8px 15px!important;
        text-decoration: none!important;
        border: none!important;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro'!important;
        color: #FFFFFF!important;
        margin-right: 1em;
        margin-top: 0.4em;
        margin-bottom: 0.5em;
    }
    #button_filter:hover{
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 3s; /* don't forget to set a duration! */
    }
    #filter-panel{
        height: auto;
        position: absolute;
        width: 99.25%;
        z-index: 99;
        margin-top: -25px;
        margin-left: 1%;
        padding-right: 2.7em;
        padding-top: 25px;
    }
    .filter-panel-body{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        box-shadow: 0px 4px 6px #51515129;
        border-radius: 5px;
    }
    .filter-panel-body:before{
        content: "";
        position: absolute;
        top: -11.5px;
        right: 11.5em;
        width: 0;
        height: 0;
        border-width: 0 35px 35px;
        border-style: solid;
        border-color: transparent transparent #FFFFFF;
    }
    .filter-panel-body .dropdown-menu{
        border: transparent!important;
        background: #FFFFFF 0% 0% no-repeat padding-box!important;
        box-shadow: 0px 4px 6px #51515129!important;
    }
    .filter-panel-body .states-title{
        margin-left: 4.5em;
        padding-top: 2em;
    }
    .filter-panel-body .states-title>h1{
        text-align: left;
        font: normal normal 600 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
    }
    .filter-panel-body .filter-states{
        margin-top: 1.3em;
    }
    .filter-panel-body .filter-states .state_checkbox{
        margin-left: 4.5em;
    }

    .filter-panel-body>hr {
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
        border: 0;
        border-top: 1px solid #f3f2f2 !important;
        width: 95%;
    }

    .filter-panel-body .date_title{
        margin-left: 4.5em;
        margin-bottom: 1em;
    }
    .filter-panel-body .date_title>h1{
        text-align: left;
        font: normal normal 600 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
    }
    .filter-panel-body .separator{
        text-align: left;
        font: normal normal normal 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
        margin-top: 0.3em;
        margin-left: -6.5em;
    }
    .filter-panel-body .start_date{
        text-align: left;
        font: normal normal normal 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
        border: 2px solid #D2D2D2;
        border-radius: 5px;
        width: 188px;
        height: 46px;
        margin-left: 3.1em;
    }

    .filter-panel-body .icon-start-at{
        margin-top: -2.9em;
        margin-left: 12.8em;
        border: none!important;
        background: none!important;
    }
    .filter-panel-body .end_date{
        text-align: left;
        font: normal normal normal 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
        border: 2px solid #D2D2D2;
        border-radius: 5px;
        width: 188px;
        height: 46px;
        margin-left: 0.2em;
    }
    .filter-panel-body .icon-end-at{
        margin-top: -2.9em;
        margin-left: 9.3em;
        border: none!important;
        background: none!important;
    }
    .filter-panel-body .priority-title{
        margin-bottom: 1em;
    }
    .filter-panel-body .priority-title>h1{
        text-align: left;
        font: normal normal 600 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
    }

    .filter-panel-body .clean-filters{
        margin-left: 4.8em;
        padding-top: 0.9em;
    }
    .filter-panel-body .clean-filters .title{
        text-align: left;
        font: normal 600 normal 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #FF3434;
        cursor: pointer;
    }
    .filter-panel-body .clean-filters .title:hover{
        color:  #FF3434!important;
    }
    .filter-panel-body .filter-button{
        text-align: right;
        margin-left: -4.5em;
        margin-bottom: 2em;
        margin-top: 0.3rem;
    }
    .filter-panel-body .filter-button .close-filter{
        text-align: center;
        font: normal normal normal 18px/24px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #3F62A8;
        border: 2px solid #3F62A8;
        border-radius: 5px;
        padding: 8px 10px 8px 10px;
    }
    .filter-panel-body .filter-button .close-filter:hover{
        text-align: center;
        font: normal normal normal 18px/24px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #3F62A8;
        opacity: 1;
        background: #ffffff 0% 0% no-repeat padding-box;
        border: 2px solid #3F62A8;
        border-radius: 5px;
        padding: 8px 10px 8px 10px;
        box-shadow: 0px 0px 5px rgba(108, 108, 108, 0.39);
    }

    .filter-panel-body .filter-button .apply-filter{
        text-align: center;
        font: normal normal normal 18px/24px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #FFFFFF;
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 5px;
        padding: 9px 15px 9px 15px;
        margin-left: 1em;
    }
    .filter-panel-body .filter-button .apply-filter:hover{
        text-align: center;
        letter-spacing: 0px;
        border-radius: 5px;
        padding: 9px 15px 9px 15px;
        background: #3F62A8 0% 0% no-repeat padding-box;
        font: normal normal normal 18px/24px 'Source Sans Pro';
        color: #FFFFFF;
        box-shadow: 0px 0px 6px rgba(108, 108, 108, 0.56);
    }
    .update>a{
        text-align: left;
        font: normal normal 600 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070!important;
        opacity: 1;
        margin-right: 1em;
    }
    .update>button{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        opacity: 1;
        border-radius: 5px;
        padding: 8px 15px 8px 15px;
        text-decoration: none!important;
        margin-top: 6px;
        text-align: center;
        font: normal normal 600 18px/23px 'Source Sans Pro';
        color: #707070;
    }
    .update>a{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        opacity: 1;
        border-radius: 5px;
        padding: 8px 15px 8px 15px;
        text-decoration: none!important;
        margin-top: 6px;
        text-align: center;
        font: normal normal 600 18px/23px 'Source Sans Pro';
        color: #707070;
    }
    .update>a:hover{
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 3s; /* don't forget to set a duration! */
    }
    /**body table*/
    .header-task-monitor{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        opacity: 1;
    }
    .header-task-monitor .text-center{
        padding: 30px 0px;
    }
    .header-task-monitor .customer{
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
        padding: 0px 0px 0px 30px;
    }
    .priority-class-customer-1{
        background: #6594FF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        margin-left: 30%;
        margin-right: 30%;
        padding-top: 2%;
        padding-bottom: 3%;
        text-align: center;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
    }
    .priority-class-customer-2{
        background: #1A3D8F 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        margin-left: 37%;
        margin-right: 37%;
        padding-top: 2%;
        padding-bottom: 3%;
    }
    .priority-class-customer-3{
        background: #757575 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        margin-left: 32%;
        margin-right: 32%;
        padding-top: 2%;
        padding-bottom: 3%;
    }
    .priority-class-customer-4{
        background: #FF6665 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        margin-left: 37%;
        margin-right: 37%;
        padding-top: 2%;
        padding-bottom: 3%;
    }
    .priority-class-customer-5{
        background: #FF3434 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        margin-left: 30%;
        margin-right: 30%;
        padding-top: 2%;
        padding-bottom: 3%;
    }

    .state-class-custom-8{
        background: #FF6D5D 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-2{
        background: #8B8B8B 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-3{
        background: #36B980 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-4{
        background: #1BA198 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-5{
        background: #5D9EFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-6{
        background: #FF5D5D 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-7{
        background: #FFAE36 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-1{
        background: #2D2D2D 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-9{
        background: #F456FF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-10{
        background: #5D7DFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-11{
        background: #685DFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }

    .days-task{
        text-align: center;
        font: normal normal normal 14px/18px Source Sans Pro;
        letter-spacing: 0px;
        color: #FFFFFF;
        opacity: 1;
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 5px;
        margin-left: 28%;
        margin-right: 28%;
        padding-top: 3%;
        padding-bottom: 4%;
    }
    .undo-evaluate {
        text-decoration: none !important;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF !important;
    }
    .undo-button-evaluate {
        background: #FFB114 0% 0% no-repeat padding-box;
        box-shadow: 0px 2px 4px #00000029;
        border-radius: 5px;
        opacity: 1;
        cursor: pointer;
        padding-left: 50px;
    }
    .undo-button-evaluate:hover{
        background: #FFB114 0% 0% no-repeat padding-box;
        box-shadow: 0px 2px 4px #00000029;
        border-radius: 5px;
        opacity: 1;
        cursor: pointer;
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 1s; /* don't forget to set a duration! */
    }
    .evaluate{
        text-decoration: none!important;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF!important;
        opacity: 1;
        padding-left: 13px;
    }
    .button-evaluate{
        background: #7896FB 0% 0% no-repeat padding-box;
        box-shadow: 0px 2px 4px #00000029;
        border-radius: 5px;
        opacity: 1;
    }
    .button-evaluate:hover{
        background: #7896FB 0% 0% no-repeat padding-box;
        box-shadow: 0px 2px 4px #00000029;
        border-radius: 5px;
        opacity: 1;
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 1s; /* don't forget to set a duration! */
    }
    .img-evaluate{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    /**Modal dialog*/
    .modal-dialog .modal-content .modal-body .modal-card{
        box-shadow: 0px 0px 6px #00000029;
        border-radius: 5px;
        opacity: 1;
        width: 320px;
        height: 334px;
        margin-left: 12%;
        margin-top: 3%;
        margin-bottom: 3%;
    }
    .modal-dialog .modal-content .modal-body .two-modal-card{
        box-shadow: 0px 0px 6px #00000029;
        border-radius: 5px;
        opacity: 1;
        width: 320px;
        height: 334px;
        margin-left: 2%;
        margin-top: 3%;
        margin-bottom: 3%;
    }
    .modal-dialog .modal-content .modal-body .modal-card .text-modal-monitor{
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
        padding-left: 7%;
        padding-right: 7%;
    }
    .modal-dialog .modal-content .modal-body .two-modal-card .text-modal-monitor{
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
        padding-left: 7%;
        padding-right: 7%;
    }
    .modal-dialog .modal-content .modal-body .modal-card .text-modal-monitor .bold-text{
        text-align: center;
        font: normal normal 600 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
    }
    .modal-dialog .modal-content .modal-body .two-modal-card .text-modal-monitor .bold-text{
        text-align: center;
        font: normal normal 600 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
    }
    .modal-dialog .modal-content .modal-header .modal-title{
        text-align: left;
        font: normal normal 600 24px/20px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3F62A8;
        opacity: 1;
        margin-top: 0.2em;
        margin-left: -19em;
    }
    .modal-dialog .modal-content .modal-header{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        box-shadow: 0px 1px 5px #5B5B5B29;
        border-radius: 10px 10px 0px 0px;
        opacity: 1;
    }
    .modal-dialog .modal-content .modal-body>p{
        text-align: left;
        font: normal normal normal 20px/25px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
        opacity: 1;
        padding-left: 6%;
        padding-right: 8%;
        margin-top: 1%;
    }
    .modal-dialog .modal-content .modal-footer .cancel-modal-approval{
        text-align: center;
        font: normal normal 600 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3F62A8;
        text-shadow:  0px 3px 6px #FFFFFF29;
        opacity: 1;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #3F62A8;
        border-radius: 5px;
        padding: 6px 10px 6px 10px;
    }
    .modal-dialog .modal-content .modal-footer .cancel-modal-approval:hover{
        text-align: center;
        font: normal normal 600 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3F62A8;
        opacity: 1;
        background: #ffffff 0% 0% no-repeat padding-box;
        border: 1px solid #3F62A8;
        border-radius: 5px;
        padding: 6px 10px 6px 10px;
        box-shadow: 0px 0px 5px rgba(108, 108, 108, 0.39);
    }
    .modal-dialog .modal-content .modal-footer .confirm-modal-approval{
        text-align: center;
        letter-spacing: 0px;
        opacity: 1;
        border: 1px solid #3F62A8;
        border-radius: 5px;
        padding: 6px 10px 6px 10px;
        background: #3F62A8 0% 0% no-repeat padding-box;
        font: normal normal normal 18px/23px "Source Sans Pro";
        color: #FFFFFF;
        text-shadow:  0px 3px 6px #FFFFFF29;
    }
    .modal-dialog .modal-content .modal-footer .confirm-modal-approval:hover{
        text-align: center;
        letter-spacing: 0px;
        opacity: 1;
        border: 1px solid #4168B6FF;
        border-radius: 5px;
        padding: 6px 10px 6px 10px;
        background: #4168b6 0% 0% no-repeat padding-box;
        font: normal normal normal 18px/23px "Source Sans Pro";
        color: #FFFFFF;
        box-shadow: 0px 0px 6px rgba(108, 108, 108, 0.56);
    }
    .modal-dialog .modal-content{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border-radius: 10px;
        opacity: 1;
    }

    .active{
        background: #f4f6f9!important;

    }

    .modal-dialog .modal-content .modal-body .title-one{
        text-align: left;
        font: normal normal normal 20px/25px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
        margin-top: 5%;
        margin-left: 23%;
    }
    .modal-dialog .modal-content .modal-body .title-two{
        text-align: left;
        font: italic normal 600 20px/25px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #484848;
        margin-left: 23%;
    }
    .modal-dialog .modal-content .modal-body .body-one{
        margin-top: 4%;
        background: #E8EDFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        text-align: left;
        font: normal normal bold 16px/20px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #212E58;
        opacity: 1;
        margin-right: 19.5em;
        padding-left: 2%;
        margin-left: 23%;
    }
    .modal-dialog .modal-content .modal-body .body-two{
        text-align: left;
        font: normal normal normal 16px/20px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #484848;
        margin-top: 3%;
        margin-right: 5%;
        margin-left: 23%;
    }

    .modal-dialog .modal-content .modal-body .body-three{
        text-align: left;
        font: normal normal 600 16px/20px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
        margin-right: 5%;
    }
    .modal-dialog .modal-content .modal-body .body-four{
        text-align: left;
        font: normal normal normal 16px/20px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #484848;
        margin-top: 2%;
        margin-right: 5%;
        margin-left: 23%;
    }

    /**table*/
    .accent-fuchsia .page-item.active .page-link {
        background-color: #FFFFFF!important;
        border: none!important;
        color: black;!important;
    }
    .accent-fuchsia .page-item{
        margin: 0.2em;
    }
    .accent-fuchsia .page-item .page-link {
        background-color: #ECECEC!important;
        border: none!important;
        color: black;!important;
        border-radius: 100%;
        width: 100%;
    }
    .accent-fuchsia .page-item .page-link:hover {
        background-color: #E2E2E2!important;
        border: none!important;
        color: black;!important;
        border-radius: 100%;
        width: 100%;
    }
    table, tr, td{
        border:none!important;
    }
    table, thead, th{
        border: none!important;
    }


    /**Modal secciones*/
    .three-modal-title{
        text-align: left;
        font: normal normal 600 24px/20px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3F62A8!important;
        opacity: 1;
        margin-left:3%;
        margin-top: -0.8em;
    }
    .form-control-8{
        background: #FF6D5D 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 220px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 72.5%;
        margin-top: -1.9em
    }
    .form-control-2{
        background: #8B8B8B 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 120px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 80%;
        margin-top: -1.9em
    }
    .form-control-3{
        background: #36B980 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 120px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 80%;
        margin-top: -1.9em
    }
    .form-control-4{
        background: #1BA198 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 235px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 71.5%;
        margin-top: -1.9em
    }
    .form-control-5{
        background: #5D9EFF 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 160px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 77%;
        margin-top: -1.9em
    }
    .form-control-6{
        background: #FF5D5D 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 180px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 75.5%;
        margin-top: -1.9em
    }
    .form-control-7{
        background: #FFAE36 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 230px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 72%;
        margin-top: -1.9em
    }
    .form-control-1{
        background: #2D2D2D 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 190px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 74.5%;
        margin-top: -1.9em
    }
    .form-control-9{
        background: #F456FF 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 250px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 70.5%;
        margin-top: -1.9em
    }
    .form-control-10{
        background: #5D7DFF 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 140px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 78%;
        margin-top: -1.9em
    }
    .form-control-11{
        background: #685DFF 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 90px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 82%;
        margin-top: -1.9em
    }
    .modal-body{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        box-shadow: 0px 1px 5px #5B5B5B29;
        border-radius: 10px 10px 0px 0px;
        opacity: 1;
        padding-bottom: 2%;
    }
    .modal-text-section .section{
        border-right: 1px solid #D2D2D2;
        transition: all 0.5s;
        padding-right: 16px;
        word-break: break-all;
    }
    .modal-text-section .section .section-title{
        text-align: left;
        font: normal normal 600 22px/28px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #484848;
        opacity: 1;
        margin-top: 5%;
        margin-left: 10%;
        margin-bottom: 2%
    }
    .modal-text-section .vl{
        border: 1px solid #D2D2D2;
        height: 894px;
        position: absolute;
        left: 94%;
        margin-left: -3px;
        top: 0;
    }
    .modal-text-section .line{
        border: 1px solid #D2D2D2;
        height: 894px;
        position: absolute;
        left: 99%;
        margin-left: -3px;
        top: 0;
    }
    .modal-text-section .date{
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #4A4A4A;
        opacity: 1;
        margin-left: 4%;
        margin-top: 4%;
    }
    .modal-text-section .section-evaluate{
        background: #7896FB 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        width: 120px;
        height: 35px;
        padding-top: 5px;
        margin-left: 80.5%;
        margin-top: -3em;
        text-align: center;
    }
    .modal-text-section .section-evaluate:hover{
        background: #7896FB 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        width: 120px;
        height: 35px;
        padding-top: 5px;
        margin-left: 80.5%;
        margin-top: -3em;
        text-align: center;
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 1s; /* don't forget to set a duration! */
    }
    .modal-text-section .section-undo-evaluate{
        background: #FFB114 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        width: 180px;
        height: 35px;
        padding-top: 5px;
        margin-left: 75.5%;
        margin-top: -3em;
        text-align: center;
    }
    .modal-text-section .sections-evaluate{
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF!important;
        opacity: 1;
        text-decoration: none!important;
    }
    .modal-text-section .section-undo-evaluate:hover{
        background: #FFB114 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        width: 180px;
        height: 35px;
        padding-top: 5px;
        margin-left: 76.5%;
        margin-top: -3em;
        text-align: center;
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 1s; /* don't forget to set a duration! */
    }
    .modal-text-section .valign-middle-img{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        width: 120px;
        height: 35px;
        padding-top: 5px;
        margin-left: 84.3%;
        margin-top: -3em;
    }
    .modal-text-section .option_{
        margin-bottom: 0.6em;
        margin-top: 0.6em;
        margin-right: 5%;
    }
    .modal-text-section .option_:hover{
        background: #CCCCCC;
    }
    .modal-text-section .active-button{
        background: #F1F1F1;
    }
    .modal-text-section .dropdown-item:active {
        color: #fff;
        text-decoration: none;
        background-color: #F1F1F1;
    }

    /**Linea centro*/
    .center_line>div{
        border: 1px solid #D2D2D2;
        opacity: 1;
        margin-right: 4%;
        margin-left: 2%;
    }
    .center_line{
        margin: 25px;
    }
    .modal-text-section .title{
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #222E58;
        opacity: 1;
        cursor: pointer;
    }
    .modal-text-section .title:hover{
        color: #222E58;
        cursor: pointer;
    }

    /***/
    .dropdown-toggle .title{
        margin-left: 20%;
        background: #FFFFFF;
    }
    .footer{
        text-align: right;
        margin-left: 48em;
        margin-bottom: 1em;
    }
    .footer>button{
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        padding: 10px 20px 10px 20px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        text-shadow: 0px 3px 6px #FFFFFF29;
        border: 1px solid #4168B6FF;
        box-shadow: 0px 0px 6px transparent;
    }
    .footer>button:hover{
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        padding: 10px 20px 10px 20px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        text-shadow: 0px 3px 6px #FFFFFF29;
        border: 1px solid #4168B6FF;
        box-shadow: 0px 0px 6px rgba(108, 108, 108, 0.56);
    }
    .footer>button:focus{
        outline:none !important;
        outline-width: 0 !important;
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        border: 1px solid #3F62A8;
    }
    .archive-task-monitor{
        background: #F1F1F1  0% 0% no-repeat padding-box;
        box-shadow: 0px 0px 4px #00000029;
        border-radius: 5px;
        opacity: 1;
        margin-left: 20px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3E3E3E!important;
        text-shadow:  0px 3px 6px #FFFFFF29;
        border: none!important;
        padding: 5px 12px 5px 12px;
    }
    .comment-task-monitor{
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848!important;
    }
    .include-task-monitor{
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848!important;
        padding: 2em 2em 2em 2em;
        border-radius: 5px;
        background: #F1F1F1 0% 0% no-repeat padding-box;
        border: 1px solid #E9E9E9;
    }
    .include-task-monitor:hover{
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848!important;
        padding: 2em 2em 2em 2em;
        border-radius: 5px;
        background: #F1F1F1 0% 0% no-repeat padding-box;
        box-shadow: 0px 0px 4px rgba(108, 108, 108, 0.39);
        border: 1px solid #E9E9E9;
    }
    nav svg{
        height: 20px;
    }
    nav span{
        text-align: left;
        font: normal normal normal 20px/27px "Source Sans Pro";
        letter-spacing: 0px;
        color: #707070;
        opacity: 1;
    }


    /**Modal*/

    .not-confirm-on-state-change{
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        letter-spacing: 0px;
        color: #FFFFFF;
        text-shadow:  0px 3px 6px #FFFFFF29;
        width: 90px;
        height: 35px;
        border: 1px solid #4168B6FF;
        padding: 6px 10px 6px 10px;
        background: #4168b6 0% 0% no-repeat padding-box;
        font: normal normal normal 18px/23px "Source Sans Pro";
        box-shadow: 0px 0px 6px transparent;
    }
    .not-confirm-on-state-change:hover{
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        letter-spacing: 0px;
        color: #FFFFFF;
        text-shadow:  0px 3px 6px #FFFFFF29;
        width: 90px;
        height: 35px;
        border: 1px solid #4168B6FF;
        padding: 6px 10px 6px 10px;
        background: #4168b6 0% 0% no-repeat padding-box;
        font: normal normal normal 18px/23px "Source Sans Pro";
        box-shadow: 0px 0px 6px rgba(108, 108, 108, 0.56);
    }
    .not-confirm-on-state-change:focus{
        outline:none !important;
        outline-width: 0 !important;
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        border: 1px solid #3F62A8;
    }
    .confirm-on-state-change {
        font: normal normal 600 18px/23px 'Source Sans Pro';
        color: #3F62A8;
        text-shadow:  0px 3px 6px #FFFFFF29;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #3F62A8;
        border-radius: 5px;
        opacity: 1;
        width: 90px;
        height: 35px;
        margin-top: 20px;
        text-align: center;
        padding: 6px 10px 6px 10px;
    }
    .confirm-on-state-change:hover {
        text-shadow:  0px 3px 6px #FFFFFF29;
        border-radius: 5px;
        opacity: 1;
        width: 90px;
        height: 35px;
        margin-top: 20px;
        text-align: center;
        font: normal normal 600 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3F62A8;
        background: #ffffff 0% 0% no-repeat padding-box;
        border: 1px solid #3F62A8;
        padding: 6px 10px 6px 10px;
        box-shadow: 0px 0px 5px rgba(108, 108, 108, 0.39);
    }
    /** Modal de rechazo  **/
    #undoModal .process{
        font: normal normal 600 18px/23px 'Source Sans Pro';
        color: #474747;
        text-shadow:  0px 3px 6px #FFFFFF29;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #464646;
        border-radius: 5px;
        opacity: 1;
        margin-top: 30px;
        text-align: center;
        padding: 5px 2em 5px 2em;
    }
    /** Calificación**/

    #task_monitor_confirmModal .process{
        font: normal normal 600 18px/23px 'Source Sans Pro';
        color: #3F62A8;
        text-shadow:  0px 3px 6px #3F62A8;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #3F62A8;
        border-radius: 5px;
        opacity: 1;
        margin-top: 40px;
        text-align: center;
        padding: 5px 2em 5px 2em;
    }
    /**
      CUSTOM PAGINATOR
     */
    /**Paginación*/

    .page-item{
        background: #ECECEC!important;
    }
    .page-link{
        text-align: center;
        font: normal normal normal 20px/25px "Source Sans Pro";
        letter-spacing: 0px;
        color: #414141!important;
        opacity: 1;
        margin: 0.5em;
        border-radius: 100%!important;
    }

    .current-page{
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 20px!important;
        opacity: 1;
        color: #FFFFFF;
        padding: 1px 8px 1px 8px;
    }
    .custom_paginator .pagination li.page-item.disabled>span{
        background: #E2E2E2!important;
        color: #414141 !important;
    }
    .custom_paginator .pagination li.page-item.active>span,
    .custom_paginator .pagination li.page-item.active>span{
        text-align: center;
        color: #FFFFFF!important;
        border-radius: 100%!important;
        width: 100%;
        background: #3F62A8!important;
    }

    .custom_paginator .pagination li:first-child>button,
    .custom_paginator .pagination li:first-child>span,
    .custom_paginator .pagination li:last-child>button,
    .custom_paginator .pagination li:last-child>span{
        text-align: center;
        color: #fff0f0!important;
        border-radius: 100%!important;
        max-width: 100%;
        background: #3F62A8!important;
        /*width: 2em!important;*/
    }

    .custom_paginator .pagination li:first-child>button:hover,
    .custom_paginator .pagination li:last-child>button:hover{
        text-align: center;
        color: #FFFFFF!important;
        max-width: 100%;
        border-radius: 100%!important;
        background: #3F62A8!important;
    }

    /**Modal de secciones**/
    .modal-header-section .reloj{
        width: 120px;
        height: 35px;
        border: 1px solid #B8B8B8!important;
        background: #FFFFFF!important;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #757575;
        margin-left: 89%;
        margin-top: -2.3em
    }

    .modal-header-section .type-state{
        text-align: center;
        color: #FFFFFF;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        padding-top: 5px
    }
    .modal-header-section .close{
        margin-top: -2.3em;
        margin-right: -1.5%;
    }


    /**Modal Cerrar*/

    /**Linea centro*/
    .modal-close .modal-close .close-line>div{
        border: 1px solid #D2D2D2;
        opacity: 1;
        margin-right: 10%;
        margin-left: 10%;
    }
    .modal-close .modal-close .close-line{
        margin: 25px;
    }

    /**Modal uno*/
    .option_confirm:hover{
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 1s; /* don't forget to set a duration! */
    }
    .form-control:focus{
        outline:none !important;
        outline-width: 0 !important;
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        border: 1px solid #C4C4C4!important;
    }

    /**table customer*/

    .header-task-monitor .state-title{
        width: 5%;
        vertical-align: middle;
    }
    .header-task-monitor .state-title .state-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor .customer{
        vertical-align: middle;
    }
    .header-task-monitor .customer .customer-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor .start-date{
        vertical-align: middle;
    }
    .header-task-monitor .start-date .start-date-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor .end-date{
        vertical-align: middle
    }
    .header-task-monitor .end-date .end-date-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor .cycle{
        vertical-align: middle
    }
    .header-task-monitor .cycle .task-cycle-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor .priority-title{
        vertical-align: middle
    }

    .header-task-monitor .priority-title .priority-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor .approval-title{
        vertical-align: middle;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }

    .hover-table{
        background-color: white !important;
    }
    .hover-table:hover{
        background-color: #f4f6f9 !important;
    }

    .edge-of-state{
        background: white;
        position: relative;
        border-radius: 8px;
    }
    .edge-of-state .customer-state-of-edge{
        position: absolute;
        left:-1.8em;
        top: 10px;
        background:white;
        width: 5px;
        height: 58px;
        border-radius: 0 3px 3px 0;
    }
    .name-state{
        text-align: left;
        font: normal normal normal 18px/22px 'Source Sans Pro';
        color: #FFFFFF;
        width: 171px;
        padding-bottom: 25px;
        padding-top: 25px;
        vertical-align: middle!important;
    }
    .table td, .table th {
        padding: 0.75rem;
        vertical-align: middle!important;
        border-top: 1px solid #dee2e6;
    }
    .showTask .name{
        text-align: left;
        font: normal normal normal 15px/19px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #777777;
        opacity: 1;
    }
    .showTask .img-state{
        text-align: left;
        font: normal normal normal 20px/25px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #414141;
        opacity: 1;
    }
    .start-date{
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        color: #414141;
    }
    .date-end{
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        color: #414141;
    }
}
@media (min-width: 1700px) and (max-width: 1750px){
    /**Menú*/
    .navbar {
        background: #FFFFFF 0% 0% no-repeat padding-box!important;
        box-shadow: 0px 3px 5px #8E8E8E29;
        opacity: 1;
        height: 103px;
    }
    .navbar .navbar-brand .savmanagemnet-logo{
        max-width: 290px;
        max-height: 33px;
    }
    .navbar .img-customer{
        text-align: right;
    }
    .navbar .img-customer .logo-customer{
        max-width: 110px;
        max-height: 53px;
    }
    .d-flex{
        width: 20%;
        text-align: right;
        margin-right: -10.5%;
    }
    .d-flex .close-section{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #646464;
        opacity: 1;
        border-radius: 10px;
        padding: 6px 13px 6px 13px;
        text-decoration: none!important;
        margin-top: 6px;
        text-align: center;
        font: normal normal 600 18px/23px 'Source Sans Pro';
        color: #4E4E4E;
    }
    .d-flex .close-section:hover{
        background: #E8E8E8 0% 0% no-repeat padding-box;
        border: 1px solid #646464;
        opacity: 1;
        border-radius: 10px;
        padding: 6px 13px 6px 13px;
        text-decoration: none!important;
        margin-top: 6px;
        text-align: center;
        font: normal normal 600 18px/23px 'Source Sans Pro';
        color: #4E4E4E;
    }
    .navbar .vl{
        border-left: 1px solid #CCCCCC;
        height: 40px;
        position: absolute;
        left: 88.2%;
        top: 35%;
    }

    /**Buscar*/

    .task-monitor-search{
        margin-top: 30px;
    }
    .task-monitor-search .form-control{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #C4C4C4!important;
        border-radius: 5px!important;
        color: #AAAAAA!important;
        opacity: 1;
        margin-left: 2.2%;
        margin-right: 2.2%;
        padding: 1.3em 2em 1.3em 2em;
    }
    .task-monitor-search>input:focus {
        outline:none !important;
        outline-width: 0 !important;
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        border: 1px solid #C4C4C4;
    }

    /**Resultados y actualizar*/
    .help-block{
        text-align: left;
        font: normal normal normal 20px/27px "Source Sans Pro";
        letter-spacing: 0px;
        color: #707070!important;
        opacity: 1;
        margin-left: 2.5%;
    }
    .number{
        margin-top: -1.7em;
        text-align: center;
        color: #FFFFFF;
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0;
        padding: 2px 6px 2px 6px;
    }

    #button_filter{
        background: #3F62A8 0% 0% no-repeat padding-box!important;
        border-radius: 5px;
        padding: 8px 15px 8px 15px!important;
        text-decoration: none!important;
        border: none!important;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro'!important;
        color: #FFFFFF!important;
        margin-right: 1em;
        margin-top: 0.4em;
        margin-bottom: 0.5em;
    }
    #button_filter:hover{
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 3s; /* don't forget to set a duration! */
    }
    #filter-panel{
        height: auto;
        position: absolute;
        width: 99.25%;
        z-index: 99;
        margin-top: -25px;
        margin-left: 1%;
        padding-right: 2.7em;
        padding-top: 25px;
    }
    .filter-panel-body{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        box-shadow: 0px 4px 6px #51515129;
        border-radius: 5px;
    }
    .filter-panel-body:before{
        content: "";
        position: absolute;
        top: -11.5px;
        right: 11.5em;
        width: 0;
        height: 0;
        border-width: 0 35px 35px;
        border-style: solid;
        border-color: transparent transparent #FFFFFF;
    }
    .filter-panel-body .dropdown-menu{
        border: transparent!important;
        background: #FFFFFF 0% 0% no-repeat padding-box!important;
        box-shadow: 0px 4px 6px #51515129!important;
    }
    .filter-panel-body .states-title{
        margin-left: 4.5em;
        padding-top: 2em;
    }
    .filter-panel-body .states-title>h1{
        text-align: left;
        font: normal normal 600 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
    }
    .filter-panel-body .filter-states{
        margin-top: 1.3em;
    }
    .filter-panel-body .filter-states .state_checkbox{
        margin-left: 4.5em;
    }

    .filter-panel-body>hr {
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
        border: 0;
        border-top: 1px solid #f3f2f2 !important;
        width: 95%;
    }

    .filter-panel-body .date_title{
        margin-left: 4.5em;
        margin-bottom: 1em;
    }
    .filter-panel-body .date_title>h1{
        text-align: left;
        font: normal normal 600 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
    }
    .filter-panel-body .separator{
        text-align: left;
        font: normal normal normal 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
        margin-top: 0.3em;
        margin-left: -7.2em;
    }
    .filter-panel-body .start_date{
        text-align: left;
        font: normal normal normal 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
        border: 2px solid #D2D2D2;
        border-radius: 5px;
        width: 188px;
        height: 46px;
        margin-left: 3.1em;
    }

    .filter-panel-body .icon-start-at{
        margin-top: -2.9em;
        margin-left: 12.8em;
        border: none!important;
        background: none!important;
    }
    .filter-panel-body .end_date{
        text-align: left;
        font: normal normal normal 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
        border: 2px solid #D2D2D2;
        border-radius: 5px;
        width: 188px;
        height: 46px;
        margin-left: 0.2em;
    }
    .filter-panel-body .icon-end-at{
        margin-top: -2.9em;
        margin-left: 9.3em;
        border: none!important;
        background: none!important;
    }
    .filter-panel-body .priority-title{
        margin-bottom: 1em;
    }
    .filter-panel-body .priority-title>h1{
        text-align: left;
        font: normal normal 600 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
    }

    .filter-panel-body .clean-filters{
        margin-left: 4.8em;
        padding-top: 0.9em;
    }
    .filter-panel-body .clean-filters .title{
        text-align: left;
        font: normal 600 normal 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #FF3434;
        cursor: pointer;
    }
    .filter-panel-body .clean-filters .title:hover{
        color:  #FF3434!important;
    }
    .filter-panel-body .filter-button{
        text-align: right;
        margin-left: -4.5em;
        margin-bottom: 2em;
        margin-top: 0.3rem;
    }
    .filter-panel-body .filter-button .close-filter{
        text-align: center;
        font: normal normal normal 18px/24px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #3F62A8;
        border: 2px solid #3F62A8;
        border-radius: 5px;
        padding: 8px 10px 8px 10px;
    }
    .filter-panel-body .filter-button .close-filter:hover{
        text-align: center;
        font: normal normal normal 18px/24px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #3F62A8;
        opacity: 1;
        background: #ffffff 0% 0% no-repeat padding-box;
        border: 2px solid #3F62A8;
        border-radius: 5px;
        padding: 8px 10px 8px 10px;
        box-shadow: 0px 0px 5px rgba(108, 108, 108, 0.39);
    }

    .filter-panel-body .filter-button .apply-filter{
        text-align: center;
        font: normal normal normal 18px/24px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #FFFFFF;
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 5px;
        padding: 9px 15px 9px 15px;
        margin-left: 1em;
    }
    .filter-panel-body .filter-button .apply-filter:hover{
        text-align: center;
        letter-spacing: 0px;
        border-radius: 5px;
        padding: 9px 15px 9px 15px;
        background: #3F62A8 0% 0% no-repeat padding-box;
        font: normal normal normal 18px/24px 'Source Sans Pro';
        color: #FFFFFF;
        box-shadow: 0px 0px 6px rgba(108, 108, 108, 0.56);
    }
    .update>a{
        text-align: left;
        font: normal normal 600 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070!important;
        opacity: 1;
        margin-right: 1em;
    }
    .update>button{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        opacity: 1;
        border-radius: 5px;
        padding: 8px 15px 8px 15px;
        text-decoration: none!important;
        margin-top: 6px;
        text-align: center;
        font: normal normal 600 18px/23px 'Source Sans Pro';
        color: #707070;
    }
    .update>a{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        opacity: 1;
        border-radius: 5px;
        padding: 8px 15px 8px 15px;
        text-decoration: none!important;
        margin-top: 6px;
        text-align: center;
        font: normal normal 600 18px/23px 'Source Sans Pro';
        color: #707070;
    }
    .update>a:hover{
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 3s; /* don't forget to set a duration! */
    }
    /**body table*/
    .header-task-monitor{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        opacity: 1;
    }
    .header-task-monitor .text-center{
        padding: 30px 0px;
    }
    .header-task-monitor .customer{
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
        padding: 0px 0px 0px 30px;
    }
    .priority-class-customer-1{
        background: #6594FF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        margin-left: 30%;
        margin-right: 30%;
        padding-top: 2%;
        padding-bottom: 3%;
        text-align: center;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
    }
    .priority-class-customer-2{
        background: #1A3D8F 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        margin-left: 37%;
        margin-right: 37%;
        padding-top: 2%;
        padding-bottom: 3%;
    }
    .priority-class-customer-3{
        background: #757575 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        margin-left: 32%;
        margin-right: 32%;
        padding-top: 2%;
        padding-bottom: 3%;
    }
    .priority-class-customer-4{
        background: #FF6665 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        margin-left: 37%;
        margin-right: 37%;
        padding-top: 2%;
        padding-bottom: 3%;
    }
    .priority-class-customer-5{
        background: #FF3434 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        margin-left: 30%;
        margin-right: 30%;
        padding-top: 2%;
        padding-bottom: 3%;
    }

    .state-class-custom-8{
        background: #FF6D5D 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-2{
        background: #8B8B8B 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-3{
        background: #36B980 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-4{
        background: #1BA198 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-5{
        background: #5D9EFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-6{
        background: #FF5D5D 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-7{
        background: #FFAE36 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-1{
        background: #2D2D2D 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-9{
        background: #F456FF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-10{
        background: #5D7DFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-11{
        background: #685DFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }

    .days-task{
        text-align: center;
        font: normal normal normal 14px/18px Source Sans Pro;
        letter-spacing: 0px;
        color: #FFFFFF;
        opacity: 1;
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 5px;
        margin-left: 28%;
        margin-right: 28%;
        padding-top: 3%;
        padding-bottom: 4%;
    }
    .undo-evaluate {
        text-decoration: none !important;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF !important;
    }
    .undo-button-evaluate {
        background: #FFB114 0% 0% no-repeat padding-box;
        box-shadow: 0px 2px 4px #00000029;
        border-radius: 5px;
        opacity: 1;
        cursor: pointer;
        padding-left: 50px;
    }
    .undo-button-evaluate:hover{
        background: #FFB114 0% 0% no-repeat padding-box;
        box-shadow: 0px 2px 4px #00000029;
        border-radius: 5px;
        opacity: 1;
        cursor: pointer;
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 1s; /* don't forget to set a duration! */
    }
    .evaluate{
        text-decoration: none!important;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF!important;
        opacity: 1;
        padding-left: 13px;
    }
    .button-evaluate{
        background: #7896FB 0% 0% no-repeat padding-box;
        box-shadow: 0px 2px 4px #00000029;
        border-radius: 5px;
        opacity: 1;
    }
    .button-evaluate:hover{
        background: #7896FB 0% 0% no-repeat padding-box;
        box-shadow: 0px 2px 4px #00000029;
        border-radius: 5px;
        opacity: 1;
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 1s; /* don't forget to set a duration! */
    }
    .img-evaluate{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    /**Modal dialog*/
    .modal-dialog .modal-content .modal-body .modal-card{
        box-shadow: 0px 0px 6px #00000029;
        border-radius: 5px;
        opacity: 1;
        width: 320px;
        height: 334px;
        margin-left: 12%;
        margin-top: 3%;
        margin-bottom: 3%;
    }
    .modal-dialog .modal-content .modal-body .two-modal-card{
        box-shadow: 0px 0px 6px #00000029;
        border-radius: 5px;
        opacity: 1;
        width: 320px;
        height: 334px;
        margin-left: 2%;
        margin-top: 3%;
        margin-bottom: 3%;
    }
    .modal-dialog .modal-content .modal-body .modal-card .text-modal-monitor{
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
        padding-left: 7%;
        padding-right: 7%;
    }
    .modal-dialog .modal-content .modal-body .two-modal-card .text-modal-monitor{
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
        padding-left: 7%;
        padding-right: 7%;
    }
    .modal-dialog .modal-content .modal-body .modal-card .text-modal-monitor .bold-text{
        text-align: center;
        font: normal normal 600 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
    }
    .modal-dialog .modal-content .modal-body .two-modal-card .text-modal-monitor .bold-text{
        text-align: center;
        font: normal normal 600 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
    }
    .modal-dialog .modal-content .modal-header .modal-title{
        text-align: left;
        font: normal normal 600 24px/20px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3F62A8;
        opacity: 1;
        margin-top: 0.2em;
        margin-left: -19em;
    }
    .modal-dialog .modal-content .modal-header{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        box-shadow: 0px 1px 5px #5B5B5B29;
        border-radius: 10px 10px 0px 0px;
        opacity: 1;
    }
    .modal-dialog .modal-content .modal-body>p{
        text-align: left;
        font: normal normal normal 20px/25px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
        opacity: 1;
        padding-left: 6%;
        padding-right: 8%;
        margin-top: 1%;
    }
    .modal-dialog .modal-content .modal-footer .cancel-modal-approval{
        text-align: center;
        font: normal normal 600 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3F62A8;
        text-shadow:  0px 3px 6px #FFFFFF29;
        opacity: 1;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #3F62A8;
        border-radius: 5px;
        padding: 6px 10px 6px 10px;
    }
    .modal-dialog .modal-content .modal-footer .cancel-modal-approval:hover{
        text-align: center;
        font: normal normal 600 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3F62A8;
        opacity: 1;
        background: #ffffff 0% 0% no-repeat padding-box;
        border: 1px solid #3F62A8;
        border-radius: 5px;
        padding: 6px 10px 6px 10px;
        box-shadow: 0px 0px 5px rgba(108, 108, 108, 0.39);
    }
    .modal-dialog .modal-content .modal-footer .confirm-modal-approval{
        text-align: center;
        letter-spacing: 0px;
        opacity: 1;
        border: 1px solid #3F62A8;
        border-radius: 5px;
        padding: 6px 10px 6px 10px;
        background: #3F62A8 0% 0% no-repeat padding-box;
        font: normal normal normal 18px/23px "Source Sans Pro";
        color: #FFFFFF;
        text-shadow:  0px 3px 6px #FFFFFF29;
    }
    .modal-dialog .modal-content .modal-footer .confirm-modal-approval:hover{
        text-align: center;
        letter-spacing: 0px;
        opacity: 1;
        border: 1px solid #4168B6FF;
        border-radius: 5px;
        padding: 6px 10px 6px 10px;
        background: #4168b6 0% 0% no-repeat padding-box;
        font: normal normal normal 18px/23px "Source Sans Pro";
        color: #FFFFFF;
        box-shadow: 0px 0px 6px rgba(108, 108, 108, 0.56);
    }
    .modal-dialog .modal-content{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border-radius: 10px;
        opacity: 1;
    }

    .active{
        background: #f4f6f9!important;

    }

    .modal-dialog .modal-content .modal-body .title-one{
        text-align: left;
        font: normal normal normal 20px/25px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
        margin-top: 5%;
        margin-left: 23%;
    }
    .modal-dialog .modal-content .modal-body .title-two{
        text-align: left;
        font: italic normal 600 20px/25px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #484848;
        margin-left: 23%;
    }
    .modal-dialog .modal-content .modal-body .body-one{
        margin-top: 4%;
        background: #E8EDFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        text-align: left;
        font: normal normal bold 16px/20px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #212E58;
        opacity: 1;
        margin-right: 19.5em;
        padding-left: 2%;
        margin-left: 23%;
    }
    .modal-dialog .modal-content .modal-body .body-two{
        text-align: left;
        font: normal normal normal 16px/20px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #484848;
        margin-top: 3%;
        margin-right: 5%;
        margin-left: 23%;
    }

    .modal-dialog .modal-content .modal-body .body-three{
        text-align: left;
        font: normal normal 600 16px/20px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
        margin-right: 5%;
    }
    .modal-dialog .modal-content .modal-body .body-four{
        text-align: left;
        font: normal normal normal 16px/20px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #484848;
        margin-top: 2%;
        margin-right: 5%;
        margin-left: 23%;
    }

    /**table*/
    .accent-fuchsia .page-item.active .page-link {
        background-color: #FFFFFF!important;
        border: none!important;
        color: black;!important;
    }
    .accent-fuchsia .page-item{
        margin: 0.2em;
    }
    .accent-fuchsia .page-item .page-link {
        background-color: #ECECEC!important;
        border: none!important;
        color: black;!important;
        border-radius: 100%;
        width: 100%;
    }
    .accent-fuchsia .page-item .page-link:hover {
        background-color: #E2E2E2!important;
        border: none!important;
        color: black;!important;
        border-radius: 100%;
        width: 100%;
    }
    table, tr, td{
        border:none!important;
    }
    table, thead, th{
        border: none!important;
    }


    /**Modal secciones*/
    .three-modal-title{
        text-align: left;
        font: normal normal 600 24px/20px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3F62A8!important;
        opacity: 1;
        margin-left:3%;
        margin-top: -0.8em;
    }
    .form-control-8{
        background: #FF6D5D 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 220px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 74%;
        margin-top: -1.9em
    }
    .form-control-2{
        background: #8B8B8B 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 120px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 80%;
        margin-top: -1.9em
    }
    .form-control-3{
        background: #36B980 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 120px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 80%;
        margin-top: -1.9em
    }
    .form-control-4{
        background: #1BA198 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 235px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 73%;
        margin-top: -1.9em
    }
    .form-control-5{
        background: #5D9EFF 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 160px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 78%;
        margin-top: -1.9em
    }
    .form-control-6{
        background: #FF5D5D 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 180px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 76.5%;
        margin-top: -1.9em
    }
    .form-control-7{
        background: #FFAE36 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 230px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 73.5%;
        margin-top: -1.9em
    }
    .form-control-1{
        background: #2D2D2D 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 190px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 76%;
        margin-top: -1.9em
    }
    .form-control-9{
        background: #F456FF 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 250px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 72%;
        margin-top: -1.9em
    }
    .form-control-10{
        background: #5D7DFF 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 140px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 79%;
        margin-top: -1.9em
    }
    .form-control-11{
        background: #685DFF 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 90px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 82%;
        margin-top: -1.9em
    }
    .modal-body{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        box-shadow: 0px 1px 5px #5B5B5B29;
        border-radius: 10px 10px 0px 0px;
        opacity: 1;
        padding-bottom: 2%;
    }
    .modal-text-section .section{
        border-right: 1px solid #D2D2D2;
        transition: all 0.5s;
        padding-right: 16px;
        word-break: break-all;
    }
    .modal-text-section .section .section-title{
        text-align: left;
        font: normal normal 600 22px/28px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #484848;
        opacity: 1;
        margin-top: 5%;
        margin-left: 10%;
        margin-bottom: 2%
    }
    .modal-text-section .vl{
        border: 1px solid #D2D2D2;
        height: 894px;
        position: absolute;
        left: 94%;
        margin-left: -3px;
        top: 0;
    }
    .modal-text-section .line{
        border: 1px solid #D2D2D2;
        height: 894px;
        position: absolute;
        left: 99%;
        margin-left: -3px;
        top: 0;
    }
    .modal-text-section .date{
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #4A4A4A;
        opacity: 1;
        margin-left: 4%;
        margin-top: 4%;
    }
    .modal-text-section .section-evaluate{
        background: #7896FB 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        width: 120px;
        height: 35px;
        padding-top: 5px;
        margin-left: 81.2%;
        margin-top: -3em;
        text-align: center;
    }
    .modal-text-section .section-evaluate:hover{
        background: #7896FB 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        width: 120px;
        height: 35px;
        padding-top: 5px;
        margin-left: 81.2%;
        margin-top: -3em;
        text-align: center;
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 1s; /* don't forget to set a duration! */
    }
    .modal-text-section .section-undo-evaluate{
        background: #FFB114 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        width: 180px;
        height: 35px;
        padding-top: 5px;
        margin-left: 76.5%;
        margin-top: -3em;
        text-align: center;
    }
    .modal-text-section .sections-evaluate{
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF!important;
        opacity: 1;
        text-decoration: none!important;
    }
    .modal-text-section .section-undo-evaluate:hover{
        background: #FFB114 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        width: 180px;
        height: 35px;
        padding-top: 5px;
        margin-left: 76.5%;
        margin-top: -3em;
        text-align: center;
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 1s; /* don't forget to set a duration! */
    }
    .modal-text-section .valign-middle-img{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        width: 120px;
        height: 35px;
        padding-top: 5px;
        margin-left: 84.3%;
        margin-top: -3em;
    }
    .modal-text-section .option_{
        margin-bottom: 0.6em;
        margin-top: 0.6em;
        margin-right: 5%;
    }
    .modal-text-section .option_:hover{
        background: #CCCCCC;
    }
    .modal-text-section .active-button{
        background: #F1F1F1;
    }
    .modal-text-section .dropdown-item:active {
        color: #fff;
        text-decoration: none;
        background-color: #F1F1F1;
    }

    /**Linea centro*/
    .center_line>div{
        border: 1px solid #D2D2D2;
        opacity: 1;
        margin-right: 4%;
        margin-left: 2%;
    }
    .center_line{
        margin: 25px;
    }
    .modal-text-section .title{
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #222E58;
        opacity: 1;
        cursor: pointer;
    }
    .modal-text-section .title:hover{
        color: #222E58;
        cursor: pointer;
    }

    /***/
    .dropdown-toggle .title{
        margin-left: 20%;
        background: #FFFFFF;
    }
    .footer{
        text-align: right;
        margin-left: 48em;
        margin-bottom: 1em;
    }
    .footer>button{
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        padding: 10px 20px 10px 20px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        text-shadow: 0px 3px 6px #FFFFFF29;
        border: 1px solid #4168B6FF;
        box-shadow: 0px 0px 6px transparent;
    }
    .footer>button:hover{
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        padding: 10px 20px 10px 20px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        text-shadow: 0px 3px 6px #FFFFFF29;
        border: 1px solid #4168B6FF;
        box-shadow: 0px 0px 6px rgba(108, 108, 108, 0.56);
    }
    .footer>button:focus{
        outline:none !important;
        outline-width: 0 !important;
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        border: 1px solid #3F62A8;
    }
    .archive-task-monitor{
        background: #F1F1F1  0% 0% no-repeat padding-box;
        box-shadow: 0px 0px 4px #00000029;
        border-radius: 5px;
        opacity: 1;
        margin-left: 20px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3E3E3E!important;
        text-shadow:  0px 3px 6px #FFFFFF29;
        border: none!important;
        padding: 5px 12px 5px 12px;
    }
    .comment-task-monitor{
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848!important;
    }
    .include-task-monitor{
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848!important;
        padding: 2em 2em 2em 2em;
        border-radius: 5px;
        background: #F1F1F1 0% 0% no-repeat padding-box;
        border: 1px solid #E9E9E9;
    }
    .include-task-monitor:hover{
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848!important;
        padding: 2em 2em 2em 2em;
        border-radius: 5px;
        background: #F1F1F1 0% 0% no-repeat padding-box;
        box-shadow: 0px 0px 4px rgba(108, 108, 108, 0.39);
        border: 1px solid #E9E9E9;
    }
    nav svg{
        height: 20px;
    }
    nav span{
        text-align: left;
        font: normal normal normal 20px/27px "Source Sans Pro";
        letter-spacing: 0px;
        color: #707070;
        opacity: 1;
    }


    /**Modal*/

    .not-confirm-on-state-change{
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        letter-spacing: 0px;
        color: #FFFFFF;
        text-shadow:  0px 3px 6px #FFFFFF29;
        width: 90px;
        height: 35px;
        border: 1px solid #4168B6FF;
        padding: 6px 10px 6px 10px;
        background: #4168b6 0% 0% no-repeat padding-box;
        font: normal normal normal 18px/23px "Source Sans Pro";
        box-shadow: 0px 0px 6px transparent;
    }
    .not-confirm-on-state-change:hover{
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        letter-spacing: 0px;
        color: #FFFFFF;
        text-shadow:  0px 3px 6px #FFFFFF29;
        width: 90px;
        height: 35px;
        border: 1px solid #4168B6FF;
        padding: 6px 10px 6px 10px;
        background: #4168b6 0% 0% no-repeat padding-box;
        font: normal normal normal 18px/23px "Source Sans Pro";
        box-shadow: 0px 0px 6px rgba(108, 108, 108, 0.56);
    }
    .not-confirm-on-state-change:focus{
        outline:none !important;
        outline-width: 0 !important;
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        border: 1px solid #3F62A8;
    }
    .confirm-on-state-change {
        font: normal normal 600 18px/23px 'Source Sans Pro';
        color: #3F62A8;
        text-shadow:  0px 3px 6px #FFFFFF29;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #3F62A8;
        border-radius: 5px;
        opacity: 1;
        width: 90px;
        height: 35px;
        margin-top: 20px;
        text-align: center;
        padding: 6px 10px 6px 10px;
    }
    .confirm-on-state-change:hover {
        text-shadow:  0px 3px 6px #FFFFFF29;
        border-radius: 5px;
        opacity: 1;
        width: 90px;
        height: 35px;
        margin-top: 20px;
        text-align: center;
        font: normal normal 600 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3F62A8;
        background: #ffffff 0% 0% no-repeat padding-box;
        border: 1px solid #3F62A8;
        padding: 6px 10px 6px 10px;
        box-shadow: 0px 0px 5px rgba(108, 108, 108, 0.39);
    }
    /** Modal de rechazo  **/
    #undoModal .process{
        font: normal normal 600 18px/23px 'Source Sans Pro';
        color: #474747;
        text-shadow:  0px 3px 6px #FFFFFF29;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #464646;
        border-radius: 5px;
        opacity: 1;
        margin-top: 30px;
        text-align: center;
        padding: 5px 2em 5px 2em;
    }
    /** Calificación**/

    #task_monitor_confirmModal .process{
        font: normal normal 600 18px/23px 'Source Sans Pro';
        color: #3F62A8;
        text-shadow:  0px 3px 6px #3F62A8;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #3F62A8;
        border-radius: 5px;
        opacity: 1;
        margin-top: 40px;
        text-align: center;
        padding: 5px 2em 5px 2em;
    }
    /**
      CUSTOM PAGINATOR
     */
    /**Paginación*/

    .page-item{
        background: #ECECEC!important;
    }
    .page-link{
        text-align: center;
        font: normal normal normal 20px/25px "Source Sans Pro";
        letter-spacing: 0px;
        color: #414141!important;
        opacity: 1;
        margin: 0.5em;
        border-radius: 100%!important;
    }

    .current-page{
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 20px!important;
        opacity: 1;
        color: #FFFFFF;
        padding: 1px 8px 1px 8px;
    }
    .custom_paginator .pagination li.page-item.disabled>span{
        background: #E2E2E2!important;
        color: #414141 !important;
    }
    .custom_paginator .pagination li.page-item.active>span,
    .custom_paginator .pagination li.page-item.active>span{
        text-align: center;
        color: #FFFFFF!important;
        border-radius: 100%!important;
        width: 100%;
        background: #3F62A8!important;
    }

    .custom_paginator .pagination li:first-child>button,
    .custom_paginator .pagination li:first-child>span,
    .custom_paginator .pagination li:last-child>button,
    .custom_paginator .pagination li:last-child>span{
        text-align: center;
        color: #fff0f0!important;
        border-radius: 100%!important;
        max-width: 100%;
        background: #3F62A8!important;
        /*width: 2em!important;*/
    }

    .custom_paginator .pagination li:first-child>button:hover,
    .custom_paginator .pagination li:last-child>button:hover{
        text-align: center;
        color: #FFFFFF!important;
        max-width: 100%;
        border-radius: 100%!important;
        background: #3F62A8!important;
    }

    /**Modal de secciones**/
    .modal-header-section .reloj{
        width: 120px;
        height: 35px;
        border: 1px solid #B8B8B8!important;
        background: #FFFFFF!important;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #757575;
        margin-left: 89%;
        margin-top: -2.3em
    }

    .modal-header-section .type-state{
        text-align: center;
        color: #FFFFFF;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        padding-top: 5px
    }
    .modal-header-section .close{
        margin-top: -2.3em;
        margin-right: -1.5%;
    }


    /**Modal Cerrar*/

    /**Linea centro*/
    .modal-close .modal-close .close-line>div{
        border: 1px solid #D2D2D2;
        opacity: 1;
        margin-right: 10%;
        margin-left: 10%;
    }
    .modal-close .modal-close .close-line{
        margin: 25px;
    }

    /**Modal uno*/
    .option_confirm:hover{
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 1s; /* don't forget to set a duration! */
    }
    .form-control:focus{
        outline:none !important;
        outline-width: 0 !important;
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        border: 1px solid #C4C4C4!important;
    }

    /**table customer*/

    .header-task-monitor .state-title{
        width: 5%;
        vertical-align: middle;
    }
    .header-task-monitor .state-title .state-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor .customer{
        vertical-align: middle;
    }
    .header-task-monitor .customer .customer-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor .start-date{
        vertical-align: middle;
    }
    .header-task-monitor .start-date .start-date-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor .end-date{
        vertical-align: middle
    }
    .header-task-monitor .end-date .end-date-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor .cycle{
        vertical-align: middle
    }
    .header-task-monitor .cycle .task-cycle-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor .priority-title{
        vertical-align: middle
    }

    .header-task-monitor .priority-title .priority-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor .approval-title{
        vertical-align: middle;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }

    .hover-table{
        background-color: white !important;
    }
    .hover-table:hover{
        background-color: #f4f6f9 !important;
    }

    .edge-of-state{
        background: white;
        position: relative;
        border-radius: 8px;
    }
    .edge-of-state .customer-state-of-edge{
        position: absolute;
        left:-1.8em;
        top: 10px;
        background:white;
        width: 5px;
        height: 58px;
        border-radius: 0 3px 3px 0;
    }
    .name-state{
        text-align: left;
        font: normal normal normal 18px/22px 'Source Sans Pro';
        color: #FFFFFF;
        width: 171px;
        padding-top: 25px;
        padding-bottom: 25px;
        vertical-align: middle!important;
    }
    .table td, .table th {
        padding: 0.75rem;
        vertical-align: middle!important;
        border-top: 1px solid #dee2e6;
    }
    .showTask .name{
        text-align: left;
        font: normal normal normal 15px/19px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #777777;
        opacity: 1;
    }

    .showTask .img-state{
        text-align: left;
        font: normal normal normal 20px/25px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #414141;
        opacity: 1;
    }
    .start-date{
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        color: #414141;
    }
    .date-end{
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        color: #414141;
    }
}
@media (min-width: 1800px) and (max-width: 1890px){
    /**Menú*/
    .navbar {
        background: #FFFFFF 0% 0% no-repeat padding-box!important;
        box-shadow: 0px 3px 5px #8E8E8E29;
        opacity: 1;
        height: 103px;
    }
    .navbar .navbar-brand .savmanagemnet-logo{
        max-width: 290px;
        max-height: 33px;
    }
    .navbar .img-customer{
        text-align: right;
    }
    .navbar .img-customer .logo-customer{
        max-width: 110px;
        max-height: 53px;
    }
    .d-flex{
        width: 20%;
        text-align: right;
        margin-right: -10.5%;
    }
    .d-flex .close-section{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #646464;
        opacity: 1;
        border-radius: 10px;
        padding: 6px 13px 6px 13px;
        text-decoration: none!important;
        margin-top: 6px;
        text-align: center;
        font: normal normal 600 18px/23px 'Source Sans Pro';
        color: #4E4E4E;
    }
    .d-flex .close-section:hover{
        background: #E8E8E8 0% 0% no-repeat padding-box;
        border: 1px solid #646464;
        opacity: 1;
        border-radius: 10px;
        padding: 6px 13px 6px 13px;
        text-decoration: none!important;
        margin-top: 6px;
        text-align: center;
        font: normal normal 600 18px/23px 'Source Sans Pro';
        color: #4E4E4E;
    }
    .navbar .vl{
        border-left: 1px solid #CCCCCC;
        height: 40px;
        position: absolute;
        left: 88.2%;
        top: 35%;
    }

    /**Buscar*/

    .task-monitor-search{
        margin-top: 30px;
    }
    .task-monitor-search .form-control{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #C4C4C4!important;
        border-radius: 5px!important;
        color: #AAAAAA!important;
        opacity: 1;
        margin-left: 2.2%;
        margin-right: 2.2%;
        padding: 1.3em 2em 1.3em 2em;
    }
    .task-monitor-search>input:focus {
        outline:none !important;
        outline-width: 0 !important;
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        border: 1px solid #C4C4C4;
    }

    /**Resultados y actualizar*/
    .help-block{
        text-align: left;
        font: normal normal normal 20px/27px "Source Sans Pro";
        letter-spacing: 0px;
        color: #707070!important;
        opacity: 1;
        margin-left: 2.5%;
    }
    .number{
        margin-top: -1.7em;
        text-align: center;
        color: #FFFFFF;
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0;
        padding: 2px 6px 2px 6px;
    }

    #button_filter{
        background: #3F62A8 0% 0% no-repeat padding-box!important;
        border-radius: 5px;
        padding: 8px 15px 8px 15px!important;
        text-decoration: none!important;
        border: none!important;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro'!important;
        color: #FFFFFF!important;
        margin-right: 1em;
        margin-top: 0.4em;
        margin-bottom: 0.5em;
    }
    #button_filter:hover{
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 3s; /* don't forget to set a duration! */
    }
    #filter-panel{
        height: auto;
        position: absolute;
        width: 99.25%;
        z-index: 99;
        margin-top: -25px;
        margin-left: 1%;
        padding-right: 2.7em;
        padding-top: 25px;
    }
    .filter-panel-body{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        box-shadow: 0px 4px 6px #51515129;
        border-radius: 5px;
    }
    .filter-panel-body:before{
        content: "";
        position: absolute;
        top: -11.5px;
        right: 11.5em;
        width: 0;
        height: 0;
        border-width: 0 35px 35px;
        border-style: solid;
        border-color: transparent transparent #FFFFFF;
    }
    .filter-panel-body .dropdown-menu{
        border: transparent!important;
        background: #FFFFFF 0% 0% no-repeat padding-box!important;
        box-shadow: 0px 4px 6px #51515129!important;
    }
    .filter-panel-body .states-title{
        margin-left: 4.5em;
        padding-top: 2em;
    }
    .filter-panel-body .states-title>h1{
        text-align: left;
        font: normal normal 600 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
    }
    .filter-panel-body .filter-states{
        margin-top: 1.3em;
    }
    .filter-panel-body .filter-states .state_checkbox{
        margin-left: 4.5em;
    }

    .filter-panel-body>hr {
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
        border: 0;
        border-top: 1px solid #f3f2f2 !important;
        width: 95%;
    }

    .filter-panel-body .date_title{
        margin-left: 4.5em;
        margin-bottom: 1em;
    }
    .filter-panel-body .date_title>h1{
        text-align: left;
        font: normal normal 600 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
    }
    .filter-panel-body .separator{
        text-align: left;
        font: normal normal normal 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
        margin-top: 0.3em;
        margin-left: -7.2em;
    }
    .filter-panel-body .start_date{
        text-align: left;
        font: normal normal normal 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
        border: 2px solid #D2D2D2;
        border-radius: 5px;
        width: 188px;
        height: 46px;
        margin-left: 3.1em;
    }

    .filter-panel-body .icon-start-at{
        margin-top: -2.9em;
        margin-left: 12.8em;
        border: none!important;
        background: none!important;
    }
    .filter-panel-body .end_date{
        text-align: left;
        font: normal normal normal 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
        border: 2px solid #D2D2D2;
        border-radius: 5px;
        width: 188px;
        height: 46px;
        margin-left: 0.2em;
    }
    .filter-panel-body .icon-end-at{
        margin-top: -2.9em;
        margin-left: 9.3em;
        border: none!important;
        background: none!important;
    }
    .filter-panel-body .priority-title{
        margin-bottom: 1em;
    }
    .filter-panel-body .priority-title>h1{
        text-align: left;
        font: normal normal 600 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
    }

    .filter-panel-body .clean-filters{
        margin-left: 4.8em;
        padding-top: 0.9em;
    }
    .filter-panel-body .clean-filters .title{
        text-align: left;
        font: normal 600 normal 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #FF3434;
        cursor: pointer;
    }
    .filter-panel-body .clean-filters .title:hover{
        color:  #FF3434!important;
    }
    .filter-panel-body .filter-button{
        text-align: right;
        margin-left: -4.5em;
        margin-bottom: 2em;
        margin-top: 0.3rem;
    }
    .filter-panel-body .filter-button .close-filter{
        text-align: center;
        font: normal normal normal 18px/24px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #3F62A8;
        border: 2px solid #3F62A8;
        border-radius: 5px;
        padding: 8px 10px 8px 10px;
    }
    .filter-panel-body .filter-button .close-filter:hover{
        text-align: center;
        font: normal normal normal 18px/24px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #3F62A8;
        opacity: 1;
        background: #ffffff 0% 0% no-repeat padding-box;
        border: 2px solid #3F62A8;
        border-radius: 5px;
        padding: 8px 10px 8px 10px;
        box-shadow: 0px 0px 5px rgba(108, 108, 108, 0.39);
    }

    .filter-panel-body .filter-button .apply-filter{
        text-align: center;
        font: normal normal normal 18px/24px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #FFFFFF;
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 5px;
        padding: 9px 15px 9px 15px;
        margin-left: 1em;
    }
    .filter-panel-body .filter-button .apply-filter:hover{
        text-align: center;
        letter-spacing: 0px;
        border-radius: 5px;
        padding: 9px 15px 9px 15px;
        background: #3F62A8 0% 0% no-repeat padding-box;
        font: normal normal normal 18px/24px 'Source Sans Pro';
        color: #FFFFFF;
        box-shadow: 0px 0px 6px rgba(108, 108, 108, 0.56);
    }
    .update>a{
        text-align: left;
        font: normal normal 600 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070!important;
        opacity: 1;
        margin-right: 1em;
    }
    .update>button{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        opacity: 1;
        border-radius: 5px;
        padding: 8px 15px 8px 15px;
        text-decoration: none!important;
        margin-top: 6px;
        text-align: center;
        font: normal normal 600 18px/23px 'Source Sans Pro';
        color: #707070;
    }
    .update>a{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        opacity: 1;
        border-radius: 5px;
        padding: 8px 15px 8px 15px;
        text-decoration: none!important;
        margin-top: 6px;
        text-align: center;
        font: normal normal 600 18px/23px 'Source Sans Pro';
        color: #707070;
    }
    .update>a:hover{
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 3s; /* don't forget to set a duration! */
    }
    /**body table*/
    .header-task-monitor{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        opacity: 1;
    }
    .header-task-monitor .text-center{
        padding: 25px 0px!important;
    }
    .header-task-monitor .customer{
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
        padding: 0px 0px 0px 25px;
    }
    .priority-class-customer-1{
        background: #6594FF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        margin-left: 30%;
        margin-right: 30%;
        padding-top: 2%;
        padding-bottom: 3%;
        text-align: center;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
    }
    .priority-class-customer-2{
        background: #1A3D8F 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        margin-left: 37%;
        margin-right: 37%;
        padding-top: 2%;
        padding-bottom: 3%;
    }
    .priority-class-customer-3{
        background: #757575 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        margin-left: 32%;
        margin-right: 32%;
        padding-top: 2%;
        padding-bottom: 3%;
    }
    .priority-class-customer-4{
        background: #FF6665 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        margin-left: 37%;
        margin-right: 37%;
        padding-top: 2%;
        padding-bottom: 3%;
    }
    .priority-class-customer-5{
        background: #FF3434 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        margin-left: 30%;
        margin-right: 30%;
        padding-top: 2%;
        padding-bottom: 3%;
    }

    .state-class-custom-8{
        background: #FF6D5D 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-2{
        background: #8B8B8B 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-3{
        background: #36B980 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-4{
        background: #1BA198 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-5{
        background: #5D9EFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-6{
        background: #FF5D5D 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-7{
        background: #FFAE36 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-1{
        background: #2D2D2D 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-9{
        background: #F456FF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-10{
        background: #5D7DFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-11{
        background: #685DFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }

    .days-task{
        text-align: center;
        font: normal normal normal 14px/18px Source Sans Pro;
        letter-spacing: 0px;
        color: #FFFFFF;
        opacity: 1;
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 5px;
        margin-left: 28%;
        margin-right: 28%;
        padding-top: 3%;
        padding-bottom: 4%;
    }
    .undo-evaluate {
        text-decoration: none !important;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF !important;
    }
    .undo-button-evaluate {
        background: #FFB114 0% 0% no-repeat padding-box;
        box-shadow: 0px 2px 4px #00000029;
        border-radius: 5px;
        opacity: 1;
        cursor: pointer;
        padding-left: 50px;
    }
    .undo-button-evaluate:hover{
        background: #FFB114 0% 0% no-repeat padding-box;
        box-shadow: 0px 2px 4px #00000029;
        border-radius: 5px;
        opacity: 1;
        cursor: pointer;
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 1s; /* don't forget to set a duration! */
    }
    .evaluate{
        text-decoration: none!important;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF!important;
        opacity: 1;
        padding-left: 18px;
    }
    .button-evaluate{
        background: #7896FB 0% 0% no-repeat padding-box;
        box-shadow: 0px 2px 4px #00000029;
        border-radius: 5px;
        opacity: 1;
    }
    .button-evaluate:hover{
        background: #7896FB 0% 0% no-repeat padding-box;
        box-shadow: 0px 2px 4px #00000029;
        border-radius: 5px;
        opacity: 1;
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 1s; /* don't forget to set a duration! */
    }
    .img-evaluate{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    /**Modal dialog*/
    .modal-dialog .modal-content .modal-body .modal-card{
        box-shadow: 0px 0px 6px #00000029;
        border-radius: 5px;
        opacity: 1;
        width: 320px;
        height: 334px;
        margin-left: 12%;
        margin-top: 3%;
        margin-bottom: 3%;
    }
    .modal-dialog .modal-content .modal-body .two-modal-card{
        box-shadow: 0px 0px 6px #00000029;
        border-radius: 5px;
        opacity: 1;
        width: 320px;
        height: 334px;
        margin-left: 2%;
        margin-top: 3%;
        margin-bottom: 3%;
    }
    .modal-dialog .modal-content .modal-body .modal-card .text-modal-monitor{
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
        padding-left: 7%;
        padding-right: 7%;
    }
    .modal-dialog .modal-content .modal-body .two-modal-card .text-modal-monitor{
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
        padding-left: 7%;
        padding-right: 7%;
    }
    .modal-dialog .modal-content .modal-body .modal-card .text-modal-monitor .bold-text{
        text-align: center;
        font: normal normal 600 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
    }
    .modal-dialog .modal-content .modal-body .two-modal-card .text-modal-monitor .bold-text{
        text-align: center;
        font: normal normal 600 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
    }
    .modal-dialog .modal-content .modal-header .modal-title{
        text-align: left;
        font: normal normal 600 24px/20px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3F62A8;
        opacity: 1;
        margin-top: 0.2em;
        margin-left: -19em;
    }
    .modal-dialog .modal-content .modal-header{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        box-shadow: 0px 1px 5px #5B5B5B29;
        border-radius: 10px 10px 0px 0px;
        opacity: 1;
    }
    .modal-dialog .modal-content .modal-body>p{
        text-align: left;
        font: normal normal normal 20px/25px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
        opacity: 1;
        padding-left: 6%;
        padding-right: 8%;
        margin-top: 1%;
    }
    .modal-dialog .modal-content .modal-footer .cancel-modal-approval{
        text-align: center;
        font: normal normal 600 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3F62A8;
        text-shadow:  0px 3px 6px #FFFFFF29;
        opacity: 1;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #3F62A8;
        border-radius: 5px;
        padding: 6px 10px 6px 10px;
    }
    .modal-dialog .modal-content .modal-footer .cancel-modal-approval:hover{
        text-align: center;
        font: normal normal 600 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3F62A8;
        opacity: 1;
        background: #ffffff 0% 0% no-repeat padding-box;
        border: 1px solid #3F62A8;
        border-radius: 5px;
        padding: 6px 10px 6px 10px;
        box-shadow: 0px 0px 5px rgba(108, 108, 108, 0.39);
    }
    .modal-dialog .modal-content .modal-footer .confirm-modal-approval{
        text-align: center;
        letter-spacing: 0px;
        opacity: 1;
        border: 1px solid #3F62A8;
        border-radius: 5px;
        padding: 6px 10px 6px 10px;
        background: #3F62A8 0% 0% no-repeat padding-box;
        font: normal normal normal 18px/23px "Source Sans Pro";
        color: #FFFFFF;
        text-shadow:  0px 3px 6px #FFFFFF29;
    }
    .modal-dialog .modal-content .modal-footer .confirm-modal-approval:hover{
        text-align: center;
        letter-spacing: 0px;
        opacity: 1;
        border: 1px solid #4168B6FF;
        border-radius: 5px;
        padding: 6px 10px 6px 10px;
        background: #4168b6 0% 0% no-repeat padding-box;
        font: normal normal normal 18px/23px "Source Sans Pro";
        color: #FFFFFF;
        box-shadow: 0px 0px 6px rgba(108, 108, 108, 0.56);
    }
    .modal-dialog .modal-content{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border-radius: 10px;
        opacity: 1;
    }

    .active{
        background: #f4f6f9!important;

    }

    .modal-dialog .modal-content .modal-body .title-one{
        text-align: left;
        font: normal normal normal 20px/25px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
        margin-top: 5%;
        margin-left: 23%;
    }
    .modal-dialog .modal-content .modal-body .title-two{
        text-align: left;
        font: italic normal 600 20px/25px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #484848;
        margin-left: 23%;
    }
    .modal-dialog .modal-content .modal-body .body-one{
        margin-top: 4%;
        background: #E8EDFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        text-align: left;
        font: normal normal bold 16px/20px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #212E58;
        opacity: 1;
        margin-right: 19.5em;
        padding-left: 2%;
        margin-left: 23%;
    }
    .modal-dialog .modal-content .modal-body .body-two{
        text-align: left;
        font: normal normal normal 16px/20px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #484848;
        margin-top: 3%;
        margin-right: 5%;
        margin-left: 23%;
    }

    .modal-dialog .modal-content .modal-body .body-three{
        text-align: left;
        font: normal normal 600 16px/20px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
        margin-right: 5%;
    }
    .modal-dialog .modal-content .modal-body .body-four{
        text-align: left;
        font: normal normal normal 16px/20px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #484848;
        margin-top: 2%;
        margin-right: 5%;
        margin-left: 23%;
    }

    /**table*/
    .accent-fuchsia .page-item.active .page-link {
        background-color: #FFFFFF!important;
        border: none!important;
        color: black;!important;
    }
    .accent-fuchsia .page-item{
        margin: 0.2em;
    }
    .accent-fuchsia .page-item .page-link {
        background-color: #ECECEC!important;
        border: none!important;
        color: black;!important;
        border-radius: 100%;
        width: 100%;
    }
    .accent-fuchsia .page-item .page-link:hover {
        background-color: #E2E2E2!important;
        border: none!important;
        color: black;!important;
        border-radius: 100%;
        width: 100%;
    }
    table, tr, td{
        border:none!important;
    }
    table, thead, th{
        border: none!important;
    }


    /**Modal secciones*/
    .three-modal-title{
        text-align: left;
        font: normal normal 600 24px/20px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3F62A8!important;
        opacity: 1;
        margin-left:3%;
        margin-top: -0.8em;
    }
    .form-control-8{
        background: #FF6D5D 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 220px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 76.5%;
        margin-top: -1.9em
    }
    .form-control-2{
        background: #8B8B8B 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 120px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 82%;
        margin-top: -1.9em
    }
    .form-control-3{
        background: #36B980 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 120px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 82%;
        margin-top: -1.9em
    }
    .form-control-4{
        background: #1BA198 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 235px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 75.5%;
        margin-top: -1.9em
    }
    .form-control-5{
        background: #5D9EFF 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 160px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 80%;
        margin-top: -1.9em
    }
    .form-control-6{
        background: #FF5D5D 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 180px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 78%;
        margin-top: -1.9em
    }
    .form-control-7{
        background: #FFAE36 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 230px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 76%;
        margin-top: -1.9em
    }
    .form-control-1{
        background: #2D2D2D 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 190px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 78%;
        margin-top: -1.9em
    }
    .form-control-9{
        background: #F456FF 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 250px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 75%;
        margin-top: -1.9em
    }
    .form-control-10{
        background: #5D7DFF 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 140px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 81%;
        margin-top: -1.9em
    }
    .form-control-11{
        background: #685DFF 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 90px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 84%;
        margin-top: -1.9em
    }
    .modal-body{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        box-shadow: 0px 1px 5px #5B5B5B29;
        border-radius: 10px 10px 0px 0px;
        opacity: 1;
        padding-bottom: 2%;
    }
    .modal-text-section .section{
        border-right: 1px solid #D2D2D2;
        transition: all 0.5s;
        padding-right: 16px;
        word-break: break-all;
    }
    .modal-text-section .section .section-title{
        text-align: left;
        font: normal normal 600 22px/28px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #484848;
        opacity: 1;
        margin-top: 5%;
        margin-left: 10%;
        margin-bottom: 2%
    }
    .modal-text-section .vl{
        border: 1px solid #D2D2D2;
        height: 894px;
        position: absolute;
        left: 94%;
        margin-left: -3px;
        top: 0;
    }
    .modal-text-section .line{
        border: 1px solid #D2D2D2;
        height: 894px;
        position: absolute;
        left: 99%;
        margin-left: -3px;
        top: 0;
    }
    .modal-text-section .date{
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #4A4A4A;
        opacity: 1;
        margin-left: 4%;
        margin-top: 4%;
    }
    .modal-text-section .section-evaluate{
        background: #7896FB 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        width: 120px;
        height: 35px;
        padding-top: 5px;
        margin-left: 83%;
        margin-top: -3em;
        text-align: center;
    }
    .modal-text-section .section-evaluate:hover{
        background: #7896FB 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        width: 120px;
        height: 35px;
        padding-top: 5px;
        margin-left: 83%;
        margin-top: -3em;
        text-align: center;
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 1s; /* don't forget to set a duration! */
    }
    .modal-text-section .section-undo-evaluate{
        background: #FFB114 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        width: 180px;
        height: 35px;
        padding-top: 5px;
        margin-left: 78.5%;
        margin-top: -3em;
        text-align: center;
    }
    .modal-text-section .sections-evaluate{
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF!important;
        opacity: 1;
        text-decoration: none!important;
    }
    .modal-text-section .section-undo-evaluate:hover{
        background: #FFB114 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        width: 180px;
        height: 35px;
        padding-top: 5px;
        margin-left: 78.5%;
        margin-top: -3em;
        text-align: center;
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 1s; /* don't forget to set a duration! */
    }
    .modal-text-section .valign-middle-img{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        width: 120px;
        height: 35px;
        padding-top: 5px;
        margin-left: 85.5%;
        margin-top: -3em;
    }
    .modal-text-section .option_{
        margin-bottom: 0.6em;
        margin-top: 0.6em;
        margin-right: 5%;
    }
    .modal-text-section .option_:hover{
        background: #CCCCCC;
    }
    .modal-text-section .active-button{
        background: #F1F1F1;
    }
    .modal-text-section .dropdown-item:active {
        color: #fff;
        text-decoration: none;
        background-color: #F1F1F1;
    }

    /**Linea centro*/
    .center_line>div{
        border: 1px solid #D2D2D2;
        opacity: 1;
        margin-right: 4%;
        margin-left: 2%;
    }
    .center_line{
        margin: 25px;
    }
    .modal-text-section .title{
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #222E58;
        opacity: 1;
        cursor: pointer;
    }
    .modal-text-section .title:hover{
        color: #222E58;
        cursor: pointer;
    }

    /***/
    .dropdown-toggle .title{
        margin-left: 20%;
        background: #FFFFFF;
    }
    .footer{
        text-align: right;
        margin-left: 48em;
        margin-bottom: 1em;
    }
    .footer>button{
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        padding: 10px 20px 10px 20px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        text-shadow: 0px 3px 6px #FFFFFF29;
        border: 1px solid #4168B6FF;
        box-shadow: 0px 0px 6px transparent;
    }
    .footer>button:hover{
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        padding: 10px 20px 10px 20px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        text-shadow: 0px 3px 6px #FFFFFF29;
        border: 1px solid #4168B6FF;
        box-shadow: 0px 0px 6px rgba(108, 108, 108, 0.56);
    }
    .footer>button:focus{
        outline:none !important;
        outline-width: 0 !important;
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        border: 1px solid #3F62A8;
    }
    .archive-task-monitor{
        background: #F1F1F1  0% 0% no-repeat padding-box;
        box-shadow: 0px 0px 4px #00000029;
        border-radius: 5px;
        opacity: 1;
        margin-left: 20px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3E3E3E!important;
        text-shadow:  0px 3px 6px #FFFFFF29;
        border: none!important;
        padding: 5px 12px 5px 12px;
    }
    .comment-task-monitor{
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848!important;
    }
    .include-task-monitor{
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848!important;
        padding: 2em 2em 2em 2em;
        border-radius: 5px;
        background: #F1F1F1 0% 0% no-repeat padding-box;
        border: 1px solid #E9E9E9;
    }
    .include-task-monitor:hover{
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848!important;
        padding: 2em 2em 2em 2em;
        border-radius: 5px;
        background: #F1F1F1 0% 0% no-repeat padding-box;
        box-shadow: 0px 0px 4px rgba(108, 108, 108, 0.39);
        border: 1px solid #E9E9E9;
    }
    nav svg{
        height: 20px;
    }
    nav span{
        text-align: left;
        font: normal normal normal 20px/27px "Source Sans Pro";
        letter-spacing: 0px;
        color: #707070;
        opacity: 1;
    }


    /**Modal*/

    .not-confirm-on-state-change{
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        letter-spacing: 0px;
        color: #FFFFFF;
        text-shadow:  0px 3px 6px #FFFFFF29;
        width: 90px;
        height: 35px;
        border: 1px solid #4168B6FF;
        padding: 6px 10px 6px 10px;
        background: #4168b6 0% 0% no-repeat padding-box;
        font: normal normal normal 18px/23px "Source Sans Pro";
        box-shadow: 0px 0px 6px transparent;
    }
    .not-confirm-on-state-change:hover{
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        letter-spacing: 0px;
        color: #FFFFFF;
        text-shadow:  0px 3px 6px #FFFFFF29;
        width: 90px;
        height: 35px;
        border: 1px solid #4168B6FF;
        padding: 6px 10px 6px 10px;
        background: #4168b6 0% 0% no-repeat padding-box;
        font: normal normal normal 18px/23px "Source Sans Pro";
        box-shadow: 0px 0px 6px rgba(108, 108, 108, 0.56);
    }
    .not-confirm-on-state-change:focus{
        outline:none !important;
        outline-width: 0 !important;
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        border: 1px solid #3F62A8;
    }
    .confirm-on-state-change {
        font: normal normal 600 18px/23px 'Source Sans Pro';
        color: #3F62A8;
        text-shadow:  0px 3px 6px #FFFFFF29;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #3F62A8;
        border-radius: 5px;
        opacity: 1;
        width: 90px;
        height: 35px;
        margin-top: 20px;
        text-align: center;
        padding: 6px 10px 6px 10px;
    }
    .confirm-on-state-change:hover {
        text-shadow:  0px 3px 6px #FFFFFF29;
        border-radius: 5px;
        opacity: 1;
        width: 90px;
        height: 35px;
        margin-top: 20px;
        text-align: center;
        font: normal normal 600 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3F62A8;
        background: #ffffff 0% 0% no-repeat padding-box;
        border: 1px solid #3F62A8;
        padding: 6px 10px 6px 10px;
        box-shadow: 0px 0px 5px rgba(108, 108, 108, 0.39);
    }
    /** Modal de rechazo  **/
    #undoModal .process{
        font: normal normal 600 18px/23px 'Source Sans Pro';
        color: #474747;
        text-shadow:  0px 3px 6px #FFFFFF29;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #464646;
        border-radius: 5px;
        opacity: 1;
        margin-top: 30px;
        text-align: center;
        padding: 5px 2em 5px 2em;
    }
    /** Calificación**/

    #task_monitor_confirmModal .process{
        font: normal normal 600 18px/23px 'Source Sans Pro';
        color: #3F62A8;
        text-shadow:  0px 3px 6px #3F62A8;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #3F62A8;
        border-radius: 5px;
        opacity: 1;
        margin-top: 40px;
        text-align: center;
        padding: 5px 2em 5px 2em;
    }
    /**
      CUSTOM PAGINATOR
     */
    /**Paginación*/

    . .page-item{
        background: #ECECEC!important;
    }
    .page-link{
        text-align: center;
        font: normal normal normal 20px/25px "Source Sans Pro";
        letter-spacing: 0px;
        color: #414141!important;
        opacity: 1;
        margin: 0.5em;
        border-radius: 100%!important;
    }

    .current-page{
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 20px!important;
        opacity: 1;
        color: #FFFFFF;
        padding: 1px 8px 1px 8px;
    }
    .custom_paginator .pagination li.page-item.disabled>span{
        background: #E2E2E2!important;
        color: #414141 !important;
    }
    .custom_paginator .pagination li.page-item.active>span,
    .custom_paginator .pagination li.page-item.active>span{
        text-align: center;
        color: #FFFFFF!important;
        border-radius: 100%!important;
        width: 100%;
        background: #3F62A8!important;
    }

    .custom_paginator .pagination li:first-child>button,
    .custom_paginator .pagination li:first-child>span,
    .custom_paginator .pagination li:last-child>button,
    .custom_paginator .pagination li:last-child>span{
        text-align: center;
        color: #fff0f0!important;
        border-radius: 100%!important;
        max-width: 100%;
        background: #3F62A8!important;
        /*width: 2em!important;*/
    }

    .custom_paginator .pagination li:first-child>button:hover,
    .custom_paginator .pagination li:last-child>button:hover{
        text-align: center;
        color: #FFFFFF!important;
        max-width: 100%;
        border-radius: 100%!important;
        background: #3F62A8!important;
    }

    /**Modal de secciones**/
    .modal-header-section .reloj{
        width: 120px;
        height: 35px;
        border: 1px solid #B8B8B8!important;
        background: #FFFFFF!important;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #757575;
        margin-left: 90.5%;
        margin-top: -2.3em
    }

    .modal-header-section .type-state{
        text-align: center;
        color: #FFFFFF;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        padding-top: 5px
    }
    .modal-header-section .close{
        margin-top: -2.3em;
        margin-right: -1.5%;
    }


    /**Modal Cerrar*/

    /**Linea centro*/
    .modal-close .modal-close .close-line>div{
        border: 1px solid #D2D2D2;
        opacity: 1;
        margin-right: 10%;
        margin-left: 10%;
    }
    .modal-close .modal-close .close-line{
        margin: 25px;
    }

    /**Modal uno*/
    .option_confirm:hover{
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 1s; /* don't forget to set a duration! */
    }
    .form-control:focus{
        outline:none !important;
        outline-width: 0 !important;
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        border: 1px solid #C4C4C4!important;
    }

    /**table customer*/

    .header-task-monitor .state-title{
        width: 5%;
        vertical-align: middle;
    }
    .header-task-monitor .state-title .state-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor .customer{
        vertical-align: middle;
    }
    .header-task-monitor .customer .customer-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor .start-date{
        vertical-align: middle;
    }
    .header-task-monitor .start-date .start-date-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor .end-date{
        vertical-align: middle
    }
    .header-task-monitor .end-date .end-date-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor .cycle{
        vertical-align: middle
    }
    .header-task-monitor .cycle .task-cycle-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor .priority-title{
        vertical-align: middle
    }

    .header-task-monitor .priority-title .priority-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor .approval-title{
        vertical-align: middle;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }

    .hover-table{
        background-color: white !important;
    }
    .hover-table:hover{
        background-color: #f4f6f9 !important;
    }

    .edge-of-state{
        background: white;
        position: relative;
        border-radius: 8px;
    }
    .edge-of-state .customer-state-of-edge{
        position: absolute;
        left:-1.8em;
        top: 10px;
        background:white;
        width: 5px;
        height: 58px;
        border-radius: 0 3px 3px 0;
    }
    .name-state{
        text-align: left;
        font: normal normal normal 18px/22px 'Source Sans Pro';
        color: #FFFFFF;
        width: 171px;
        padding-bottom: 25px;
        padding-top: 25px;
        vertical-align: middle!important;
    }
    .showTask .name{
        text-align: left;
        font: normal normal normal 15px/19px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #777777;
        opacity: 1;
    }
    .table td, .table th {
        padding: 0.75rem;
        vertical-align: middle!important;
        border-top: 1px solid #dee2e6;
    }
    .showTask .img-state{
        text-align: left;
        font: normal normal normal 20px/25px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #414141;
        opacity: 1;
    }
    .start-date{
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        color: #414141;
    }
    .date-end{
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        color: #414141;
    }
}
@media (min-width: 1750px) and (max-width: 1800px){
    /**Menú*/
    .navbar {
        background: #FFFFFF 0% 0% no-repeat padding-box!important;
        box-shadow: 0px 3px 5px #8E8E8E29;
        opacity: 1;
        height: 103px;
    }
    .navbar .navbar-brand .savmanagemnet-logo{
        max-width: 290px;
        max-height: 33px;
    }
    .navbar .img-customer{
        text-align: right;
    }
    .navbar .img-customer .logo-customer{
        max-width: 110px;
        max-height: 53px;
    }
    .d-flex{
        width: 20%;
        text-align: right;
        margin-right: -10.5%;
    }
    .d-flex .close-section{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #646464;
        opacity: 1;
        border-radius: 10px;
        padding: 6px 13px 6px 13px;
        text-decoration: none!important;
        margin-top: 6px;
        text-align: center;
        font: normal normal 600 18px/23px 'Source Sans Pro';
        color: #4E4E4E;
    }
    .d-flex .close-section:hover{
        background: #E8E8E8 0% 0% no-repeat padding-box;
        border: 1px solid #646464;
        opacity: 1;
        border-radius: 10px;
        padding: 6px 13px 6px 13px;
        text-decoration: none!important;
        margin-top: 6px;
        text-align: center;
        font: normal normal 600 18px/23px 'Source Sans Pro';
        color: #4E4E4E;
    }
    .navbar .vl{
        border-left: 1px solid #CCCCCC;
        height: 40px;
        position: absolute;
        left: 88.2%;
        top: 35%;
    }

    /**Buscar*/

    .task-monitor-search{
        margin-top: 30px;
    }
    .task-monitor-search .form-control{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #C4C4C4!important;
        border-radius: 5px!important;
        color: #AAAAAA!important;
        opacity: 1;
        margin-left: 2%;
        margin-right: 2%;
        padding: 1.3em 2em 1.3em 2em;
    }
    .task-monitor-search>input:focus {
        outline:none !important;
        outline-width: 0 !important;
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        border: 1px solid #C4C4C4;
    }

    /**Resultados y actualizar*/
    .help-block{
        text-align: left;
        font: normal normal normal 20px/27px "Source Sans Pro";
        letter-spacing: 0px;
        color: #707070!important;
        opacity: 1;
        margin-left: 2.5%;
    }
    .number{
        margin-top: -1.7em;
        text-align: center;
        color: #FFFFFF;
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0;
        padding: 2px 6px 2px 6px;
    }

    #button_filter{
        background: #3F62A8 0% 0% no-repeat padding-box!important;
        border-radius: 5px;
        padding: 8px 15px 8px 15px!important;
        text-decoration: none!important;
        border: none!important;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro'!important;
        color: #FFFFFF!important;
        margin-right: 1em;
        margin-top: 0.4em;
        margin-bottom: 0.5em;
    }
    #button_filter:hover{
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 3s; /* don't forget to set a duration! */
    }
    #filter-panel{
        height: auto;
        position: absolute;
        width: 99.25%;
        z-index: 99;
        margin-top: -25px;
        margin-left: 1%;
        padding-right: 2.7em;
        padding-top: 25px;
    }
    .filter-panel-body{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        box-shadow: 0px 4px 6px #51515129;
        border-radius: 5px;
    }
    .filter-panel-body:before{
        content: "";
        position: absolute;
        top: -11.5px;
        right: 11.5em;
        width: 0;
        height: 0;
        border-width: 0 35px 35px;
        border-style: solid;
        border-color: transparent transparent #FFFFFF;
    }
    .filter-panel-body .dropdown-menu{
        border: transparent!important;
        background: #FFFFFF 0% 0% no-repeat padding-box!important;
        box-shadow: 0px 4px 6px #51515129!important;
    }
    .filter-panel-body .states-title{
        margin-left: 4.5em;
        padding-top: 2em;
    }
    .filter-panel-body .states-title>h1{
        text-align: left;
        font: normal normal 600 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
    }
    .filter-panel-body .filter-states{
        margin-top: 1.3em;
    }
    .filter-panel-body .filter-states .state_checkbox{
        margin-left: 4.5em;
    }

    .filter-panel-body>hr {
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
        border: 0;
        border-top: 1px solid #f3f2f2 !important;
        width: 95%;
    }

    .filter-panel-body .date_title{
        margin-left: 4.5em;
        margin-bottom: 1em;
    }
    .filter-panel-body .date_title>h1{
        text-align: left;
        font: normal normal 600 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
    }
    .filter-panel-body .separator{
        text-align: left;
        font: normal normal normal 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
        margin-top: 0.3em;
        margin-left: -7.3em;
    }
    .filter-panel-body .start_date{
        text-align: left;
        font: normal normal normal 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
        border: 2px solid #D2D2D2;
        border-radius: 5px;
        width: 188px;
        height: 46px;
        margin-left: 3.1em;
    }

    .filter-panel-body .icon-start-at{
        margin-top: -2.9em;
        margin-left: 12.8em;
        border: none!important;
        background: none!important;
    }
    .filter-panel-body .end_date{
        text-align: left;
        font: normal normal normal 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
        border: 2px solid #D2D2D2;
        border-radius: 5px;
        width: 188px;
        height: 46px;
        margin-left: 0.2em;
    }
    .filter-panel-body .icon-end-at{
        margin-top: -2.9em;
        margin-left: 9.3em;
        border: none!important;
        background: none!important;
    }
    .filter-panel-body .priority-title{
        margin-bottom: 1em;
    }
    .filter-panel-body .priority-title>h1{
        text-align: left;
        font: normal normal 600 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
    }

    .filter-panel-body .clean-filters{
        margin-left: 4.8em;
        padding-top: 0.9em;
    }
    .filter-panel-body .clean-filters .title{
        text-align: left;
        font: normal 600 normal 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #FF3434;
        cursor: pointer;
    }
    .filter-panel-body .clean-filters .title:hover{
        color:  #FF3434!important;
    }
    .filter-panel-body .filter-button{
        text-align: right;
        margin-left: -4.5em;
        margin-bottom: 2em;
        margin-top: 0.3rem;
    }
    .filter-panel-body .filter-button .close-filter{
        text-align: center;
        font: normal normal normal 18px/24px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #3F62A8;
        border: 2px solid #3F62A8;
        border-radius: 5px;
        padding: 8px 10px 8px 10px;
    }
    .filter-panel-body .filter-button .close-filter:hover{
        text-align: center;
        font: normal normal normal 18px/24px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #3F62A8;
        opacity: 1;
        background: #ffffff 0% 0% no-repeat padding-box;
        border: 2px solid #3F62A8;
        border-radius: 5px;
        padding: 8px 10px 8px 10px;
        box-shadow: 0px 0px 5px rgba(108, 108, 108, 0.39);
    }

    .filter-panel-body .filter-button .apply-filter{
        text-align: center;
        font: normal normal normal 18px/24px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #FFFFFF;
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 5px;
        padding: 9px 15px 9px 15px;
        margin-left: 1em;
    }
    .filter-panel-body .filter-button .apply-filter:hover{
        text-align: center;
        letter-spacing: 0px;
        border-radius: 5px;
        padding: 9px 15px 9px 15px;
        background: #3F62A8 0% 0% no-repeat padding-box;
        font: normal normal normal 18px/24px 'Source Sans Pro';
        color: #FFFFFF;
        box-shadow: 0px 0px 6px rgba(108, 108, 108, 0.56);
    }
    .update>a{
        text-align: left;
        font: normal normal 600 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070!important;
        opacity: 1;
        margin-right: 1em;
    }
    .update>button{
        background: transparent 0% 0% no-repeat padding-box;
        opacity: 1;
        border-radius: 5px;
        padding: 8px 15px 8px 15px;
        text-decoration: none!important;
        margin-top: 6px;
        text-align: center;
        font: normal normal 600 18px/23px 'Source Sans Pro';
        color: #707070;
    }

    .update>a{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        opacity: 1;
        border-radius: 5px;
        padding: 8px 15px 8px 15px;
        text-decoration: none!important;
        margin-top: 6px;
        text-align: center;
        font: normal normal 600 18px/23px 'Source Sans Pro';
        color: #707070;
    }
    .update>a:hover{
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 3s; /* don't forget to set a duration! */
    }
    /**body table*/
    .header-task-monitor{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        opacity: 1;
    }
    .header-task-monitor .text-center{
       padding: 20px 0px!important;
    }
    .header-task-monitor .customer{
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
        padding: 0px 0px 0px 20px;
    }
    .priority-class-customer-1{
        background: #6594FF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        margin-left: 30%;
        margin-right: 30%;
        padding-top: 2%;
        padding-bottom: 3%;
        text-align: center;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
    }
    .priority-class-customer-2{
        background: #1A3D8F 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        margin-left: 37%;
        margin-right: 37%;
        padding-top: 2%;
        padding-bottom: 3%;
    }
    .priority-class-customer-3{
        background: #757575 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        margin-left: 32%;
        margin-right: 32%;
        padding-top: 2%;
        padding-bottom: 3%;
    }
    .priority-class-customer-4{
        background: #FF6665 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        margin-left: 37%;
        margin-right: 37%;
        padding-top: 2%;
        padding-bottom: 3%;
    }
    .priority-class-customer-5{
        background: #FF3434 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        margin-left: 30%;
        margin-right: 30%;
        padding-top: 2%;
        padding-bottom: 3%;
    }

    .state-class-custom-8{
        background: #FF6D5D 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-2{
        background: #8B8B8B 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-3{
        background: #36B980 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-4{
        background: #1BA198 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-5{
        background: #5D9EFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-6{
        background: #FF5D5D 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-7{
        background: #FFAE36 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-1{
        background: #2D2D2D 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-9{
        background: #F456FF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-10{
        background: #5D7DFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-11{
        background: #685DFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }

    .days-task{
        text-align: center;
        font: normal normal normal 14px/18px Source Sans Pro;
        letter-spacing: 0px;
        color: #FFFFFF;
        opacity: 1;
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 5px;
        margin-left: 28%;
        margin-right: 28%;
        padding-top: 3%;
        padding-bottom: 4%;
    }
    .undo-evaluate {
        text-decoration: none !important;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF !important;
    }
    .undo-button-evaluate {
        background: #FFB114 0% 0% no-repeat padding-box;
        box-shadow: 0px 2px 4px #00000029;
        border-radius: 5px;
        opacity: 1;
        cursor: pointer;
        padding-left: 50px;
    }
    .undo-button-evaluate:hover{
        background: #FFB114 0% 0% no-repeat padding-box;
        box-shadow: 0px 2px 4px #00000029;
        border-radius: 5px;
        opacity: 1;
        cursor: pointer;
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 1s; /* don't forget to set a duration! */
    }
    .evaluate{
        text-decoration: none!important;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF!important;
        opacity: 1;
        padding-left: 13px;
    }
    .button-evaluate{
        background: #7896FB 0% 0% no-repeat padding-box;
        box-shadow: 0px 2px 4px #00000029;
        border-radius: 5px;
        opacity: 1;
    }
    .button-evaluate:hover{
        background: #7896FB 0% 0% no-repeat padding-box;
        box-shadow: 0px 2px 4px #00000029;
        border-radius: 5px;
        opacity: 1;
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 1s; /* don't forget to set a duration! */
    }
    .img-evaluate{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    /**Modal dialog*/
    .modal-dialog .modal-content .modal-body .modal-card{
        box-shadow: 0px 0px 6px #00000029;
        border-radius: 5px;
        opacity: 1;
        width: 320px;
        height: 334px;
        margin-left: 12%;
        margin-top: 3%;
        margin-bottom: 3%;
    }
    .modal-dialog .modal-content .modal-body .two-modal-card{
        box-shadow: 0px 0px 6px #00000029;
        border-radius: 5px;
        opacity: 1;
        width: 320px;
        height: 334px;
        margin-left: 2%;
        margin-top: 3%;
        margin-bottom: 3%;
    }
    .modal-dialog .modal-content .modal-body .modal-card .text-modal-monitor{
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
        padding-left: 7%;
        padding-right: 7%;
    }
    .modal-dialog .modal-content .modal-body .two-modal-card .text-modal-monitor{
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
        padding-left: 7%;
        padding-right: 7%;
    }
    .modal-dialog .modal-content .modal-body .modal-card .text-modal-monitor .bold-text{
        text-align: center;
        font: normal normal 600 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
    }
    .modal-dialog .modal-content .modal-body .two-modal-card .text-modal-monitor .bold-text{
        text-align: center;
        font: normal normal 600 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
    }
    .modal-dialog .modal-content .modal-header .modal-title{
        text-align: left;
        font: normal normal 600 24px/20px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3F62A8;
        opacity: 1;
        margin-top: 0.2em;
        margin-left: -19em;
    }
    .modal-dialog .modal-content .modal-header{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        box-shadow: 0px 1px 5px #5B5B5B29;
        border-radius: 10px 10px 0px 0px;
        opacity: 1;
    }
    .modal-dialog .modal-content .modal-body>p{
        text-align: left;
        font: normal normal normal 20px/25px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
        opacity: 1;
        padding-left: 6%;
        padding-right: 8%;
        margin-top: 1%;
    }
    .modal-dialog .modal-content .modal-footer .cancel-modal-approval{
        text-align: center;
        font: normal normal 600 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3F62A8;
        text-shadow:  0px 3px 6px #FFFFFF29;
        opacity: 1;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #3F62A8;
        border-radius: 5px;
        padding: 6px 10px 6px 10px;
    }
    .modal-dialog .modal-content .modal-footer .cancel-modal-approval:hover{
        text-align: center;
        font: normal normal 600 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3F62A8;
        opacity: 1;
        background: #ffffff 0% 0% no-repeat padding-box;
        border: 1px solid #3F62A8;
        border-radius: 5px;
        padding: 6px 10px 6px 10px;
        box-shadow: 0px 0px 5px rgba(108, 108, 108, 0.39);
    }
    .modal-dialog .modal-content .modal-footer .confirm-modal-approval{
        text-align: center;
        letter-spacing: 0px;
        opacity: 1;
        border: 1px solid #3F62A8;
        border-radius: 5px;
        padding: 6px 10px 6px 10px;
        background: #3F62A8 0% 0% no-repeat padding-box;
        font: normal normal normal 18px/23px "Source Sans Pro";
        color: #FFFFFF;
        text-shadow:  0px 3px 6px #FFFFFF29;
    }
    .modal-dialog .modal-content .modal-footer .confirm-modal-approval:hover{
        text-align: center;
        letter-spacing: 0px;
        opacity: 1;
        border: 1px solid #4168B6FF;
        border-radius: 5px;
        padding: 6px 10px 6px 10px;
        background: #4168b6 0% 0% no-repeat padding-box;
        font: normal normal normal 18px/23px "Source Sans Pro";
        color: #FFFFFF;
        box-shadow: 0px 0px 6px rgba(108, 108, 108, 0.56);
    }
    .modal-dialog .modal-content{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border-radius: 10px;
        opacity: 1;
    }

    .active{
        background: #f4f6f9!important;

    }

    .modal-dialog .modal-content .modal-body .title-one{
        text-align: left;
        font: normal normal normal 20px/25px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
        margin-top: 5%;
        margin-left: 23%;
    }
    .modal-dialog .modal-content .modal-body .title-two{
        text-align: left;
        font: italic normal 600 20px/25px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #484848;
        margin-left: 23%;
    }
    .modal-dialog .modal-content .modal-body .body-one{
        margin-top: 4%;
        background: #E8EDFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        text-align: left;
        font: normal normal bold 16px/20px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #212E58;
        opacity: 1;
        margin-right: 19.5em;
        padding-left: 2%;
        margin-left: 23%;
    }
    .modal-dialog .modal-content .modal-body .body-two{
        text-align: left;
        font: normal normal normal 16px/20px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #484848;
        margin-top: 3%;
        margin-right: 5%;
        margin-left: 23%;
    }

    .modal-dialog .modal-content .modal-body .body-three{
        text-align: left;
        font: normal normal 600 16px/20px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
        margin-right: 5%;
    }
    .modal-dialog .modal-content .modal-body .body-four{
        text-align: left;
        font: normal normal normal 16px/20px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #484848;
        margin-top: 2%;
        margin-right: 5%;
        margin-left: 23%;
    }

    /**table*/
    .accent-fuchsia .page-item.active .page-link {
        background-color: #FFFFFF!important;
        border: none!important;
        color: black;!important;
    }
    .accent-fuchsia .page-item{
        margin: 0.2em;
    }
    .accent-fuchsia .page-item .page-link {
        background-color: #ECECEC!important;
        border: none!important;
        color: black;!important;
        border-radius: 100%;
        width: 100%;
    }
    .accent-fuchsia .page-item .page-link:hover {
        background-color: #E2E2E2!important;
        border: none!important;
        color: black;!important;
        border-radius: 100%;
        width: 100%;
    }
    table, tr, td{
        border:none!important;
    }
    table, thead, th{
        border: none!important;
    }


    /**Modal secciones*/
    .three-modal-title{
        text-align: left;
        font: normal normal 600 24px/20px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3F62A8!important;
        opacity: 1;
        margin-left:3%;
        margin-top: -0.8em;
    }
    .form-control-8{
        background: #FF6D5D 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 220px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 74%;
        margin-top: -1.9em
    }
    .form-control-2{
        background: #8B8B8B 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 120px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 80%;
        margin-top: -1.9em
    }
    .form-control-3{
        background: #36B980 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 120px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 80%;
        margin-top: -1.9em
    }
    .form-control-4{
        background: #1BA198 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 235px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 73%;
        margin-top: -1.9em
    }
    .form-control-5{
        background: #5D9EFF 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 160px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 78%;
        margin-top: -1.9em
    }
    .form-control-6{
        background: #FF5D5D 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 180px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 76.5%;
        margin-top: -1.9em
    }
    .form-control-7{
        background: #FFAE36 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 230px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 73.5%;
        margin-top: -1.9em
    }
    .form-control-1{
        background: #2D2D2D 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 190px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 76%;
        margin-top: -1.9em
    }
    .form-control-9{
        background: #F456FF 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 250px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 72%;
        margin-top: -1.9em
    }
    .form-control-10{
        background: #5D7DFF 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 140px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 79%;
        margin-top: -1.9em
    }
    .form-control-11{
        background: #685DFF 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 90px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 82%;
        margin-top: -1.9em
    }
    .modal-body{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        box-shadow: 0px 1px 5px #5B5B5B29;
        border-radius: 10px 10px 0px 0px;
        opacity: 1;
        padding-bottom: 2%;
    }
    .modal-text-section .section{
        border-right: 1px solid #D2D2D2;
        transition: all 0.5s;
        padding-right: 16px;
        word-break: break-all;
    }
    .modal-text-section .section .section-title{
        text-align: left;
        font: normal normal 600 22px/28px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #484848;
        opacity: 1;
        margin-top: 5%;
        margin-left: 10%;
        margin-bottom: 2%
    }
    .modal-text-section .vl{
        border: 1px solid #D2D2D2;
        height: 894px;
        position: absolute;
        left: 94%;
        margin-left: -3px;
        top: 0;
    }
    .modal-text-section .line{
        border: 1px solid #D2D2D2;
        height: 894px;
        position: absolute;
        left: 99%;
        margin-left: -3px;
        top: 0;
    }
    .modal-text-section .date{
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #4A4A4A;
        opacity: 1;
        margin-left: 4%;
        margin-top: 4%;
    }
    .modal-text-section .section-evaluate{
        background: #7896FB 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        width: 120px;
        height: 35px;
        padding-top: 5px;
        margin-left: 81.2%;
        margin-top: -3em;
        text-align: center;
    }
    .modal-text-section .section-evaluate:hover{
        background: #7896FB 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        width: 120px;
        height: 35px;
        padding-top: 5px;
        margin-left: 81.2%;
        margin-top: -3em;
        text-align: center;
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 1s; /* don't forget to set a duration! */
    }
    .modal-text-section .section-undo-evaluate{
        background: #FFB114 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        width: 180px;
        height: 35px;
        padding-top: 5px;
        margin-left: 76.5%;
        margin-top: -3em;
        text-align: center;
    }
    .modal-text-section .sections-evaluate{
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF!important;
        opacity: 1;
        text-decoration: none!important;
    }
    .modal-text-section .section-undo-evaluate:hover{
        background: #FFB114 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        width: 180px;
        height: 35px;
        padding-top: 5px;
        margin-left: 76.5%;
        margin-top: -3em;
        text-align: center;
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 1s; /* don't forget to set a duration! */
    }
    .modal-text-section .valign-middle-img{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        width: 120px;
        height: 35px;
        padding-top: 5px;
        margin-left: 84.3%;
        margin-top: -3em;
    }
    .modal-text-section .option_{
        margin-bottom: 0.6em;
        margin-top: 0.6em;
        margin-right: 5%;
    }
    .modal-text-section .option_:hover{
        background: #CCCCCC;
    }
    .modal-text-section .active-button{
        background: #F1F1F1;
    }
    .modal-text-section .dropdown-item:active {
        color: #fff;
        text-decoration: none;
        background-color: #F1F1F1;
    }

    /**Linea centro*/
    .center_line>div{
        border: 1px solid #D2D2D2;
        opacity: 1;
        margin-right: 4%;
        margin-left: 2%;
    }
    .center_line{
        margin: 25px;
    }
    .modal-text-section .title{
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #222E58;
        opacity: 1;
        cursor: pointer;
    }
    .modal-text-section .title:hover{
        color: #222E58;
        cursor: pointer;
    }

    /***/
    .dropdown-toggle .title{
        margin-left: 20%;
        background: #FFFFFF;
    }
    .footer{
        text-align: right;
        margin-left: 48em;
        margin-bottom: 1em;
    }
    .footer>button{
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        padding: 10px 20px 10px 20px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        text-shadow: 0px 3px 6px #FFFFFF29;
        border: 1px solid #4168B6FF;
        box-shadow: 0px 0px 6px transparent;
    }
    .footer>button:hover{
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        padding: 10px 20px 10px 20px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        text-shadow: 0px 3px 6px #FFFFFF29;
        border: 1px solid #4168B6FF;
        box-shadow: 0px 0px 6px rgba(108, 108, 108, 0.56);
    }
    .footer>button:focus{
        outline:none !important;
        outline-width: 0 !important;
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        border: 1px solid #3F62A8;
    }
    .archive-task-monitor{
        background: #F1F1F1  0% 0% no-repeat padding-box;
        box-shadow: 0px 0px 4px #00000029;
        border-radius: 5px;
        opacity: 1;
        margin-left: 20px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3E3E3E!important;
        text-shadow:  0px 3px 6px #FFFFFF29;
        border: none!important;
        padding: 5px 12px 5px 12px;
    }
    .comment-task-monitor{
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848!important;
    }
    .include-task-monitor{
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848!important;
        padding: 2em 2em 2em 2em;
        border-radius: 5px;
        background: #F1F1F1 0% 0% no-repeat padding-box;
        border: 1px solid #E9E9E9;
    }
    .include-task-monitor:hover{
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848!important;
        padding: 2em 2em 2em 2em;
        border-radius: 5px;
        background: #F1F1F1 0% 0% no-repeat padding-box;
        box-shadow: 0px 0px 4px rgba(108, 108, 108, 0.39);
        border: 1px solid #E9E9E9;
    }
    nav svg{
        height: 20px;
    }
    nav span{
        text-align: left;
        font: normal normal normal 20px/27px "Source Sans Pro";
        letter-spacing: 0px;
        color: #707070;
        opacity: 1;
    }


    /**Modal*/

    .not-confirm-on-state-change{
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        letter-spacing: 0px;
        color: #FFFFFF;
        text-shadow:  0px 3px 6px #FFFFFF29;
        width: 90px;
        height: 35px;
        border: 1px solid #4168B6FF;
        padding: 6px 10px 6px 10px;
        background: #4168b6 0% 0% no-repeat padding-box;
        font: normal normal normal 18px/23px "Source Sans Pro";
        box-shadow: 0px 0px 6px transparent;
    }
    .not-confirm-on-state-change:hover{
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        letter-spacing: 0px;
        color: #FFFFFF;
        text-shadow:  0px 3px 6px #FFFFFF29;
        width: 90px;
        height: 35px;
        border: 1px solid #4168B6FF;
        padding: 6px 10px 6px 10px;
        background: #4168b6 0% 0% no-repeat padding-box;
        font: normal normal normal 18px/23px "Source Sans Pro";
        box-shadow: 0px 0px 6px rgba(108, 108, 108, 0.56);
    }
    .not-confirm-on-state-change:focus{
        outline:none !important;
        outline-width: 0 !important;
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        border: 1px solid #3F62A8;
    }
    .confirm-on-state-change {
        font: normal normal 600 18px/23px 'Source Sans Pro';
        color: #3F62A8;
        text-shadow:  0px 3px 6px #FFFFFF29;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #3F62A8;
        border-radius: 5px;
        opacity: 1;
        width: 90px;
        height: 35px;
        margin-top: 20px;
        text-align: center;
        padding: 6px 10px 6px 10px;
    }
    .confirm-on-state-change:hover {
        text-shadow:  0px 3px 6px #FFFFFF29;
        border-radius: 5px;
        opacity: 1;
        width: 90px;
        height: 35px;
        margin-top: 20px;
        text-align: center;
        font: normal normal 600 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3F62A8;
        background: #ffffff 0% 0% no-repeat padding-box;
        border: 1px solid #3F62A8;
        padding: 6px 10px 6px 10px;
        box-shadow: 0px 0px 5px rgba(108, 108, 108, 0.39);
    }
    /** Modal de rechazo  **/
    #undoModal .process{
        font: normal normal 600 18px/23px 'Source Sans Pro';
        color: #474747;
        text-shadow:  0px 3px 6px #FFFFFF29;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #464646;
        border-radius: 5px;
        opacity: 1;
        margin-top: 30px;
        text-align: center;
        padding: 5px 2em 5px 2em;
    }
    /** Calificación**/

    #task_monitor_confirmModal .process{
        font: normal normal 600 18px/23px 'Source Sans Pro';
        color: #3F62A8;
        text-shadow:  0px 3px 6px #3F62A8;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #3F62A8;
        border-radius: 5px;
        opacity: 1;
        margin-top: 40px;
        text-align: center;
        padding: 5px 2em 5px 2em;
    }
    /**
      CUSTOM PAGINATOR
     */
    /**Paginación*/

    .page-item{
        background: #ECECEC!important;
    }
    .page-link{
        text-align: center;
        font: normal normal normal 20px/25px "Source Sans Pro";
        letter-spacing: 0px;
        color: #414141!important;
        opacity: 1;
        margin: 0.5em;
        border-radius: 100%!important;
    }

    .current-page{
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 20px!important;
        opacity: 1;
        color: #FFFFFF;
        padding: 1px 8px 1px 8px;
    }
    .custom_paginator .pagination li.page-item.disabled>span{
        background: #E2E2E2!important;
        color: #414141 !important;
    }
    .custom_paginator .pagination li.page-item.active>span,
    .custom_paginator .pagination li.page-item.active>span{
        text-align: center;
        color: #FFFFFF!important;
        border-radius: 100%!important;
        width: 100%;
        background: #3F62A8!important;
    }

    .custom_paginator .pagination li:first-child>button,
    .custom_paginator .pagination li:first-child>span,
    .custom_paginator .pagination li:last-child>button,
    .custom_paginator .pagination li:last-child>span{
        text-align: center;
        color: #fff0f0!important;
        border-radius: 100%!important;
        max-width: 100%;
        background: #3F62A8!important;
        /*width: 2em!important;*/
    }

    .custom_paginator .pagination li:first-child>button:hover,
    .custom_paginator .pagination li:last-child>button:hover{
        text-align: center;
        color: #FFFFFF!important;
        max-width: 100%;
        border-radius: 100%!important;
        background: #3F62A8!important;
    }

    /**Modal de secciones**/
    .modal-header-section .reloj{
        width: 120px;
        height: 35px;
        border: 1px solid #B8B8B8!important;
        background: #FFFFFF!important;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #757575;
        margin-left: 89%;
        margin-top: -2.3em
    }

    .modal-header-section .type-state{
        text-align: center;
        color: #FFFFFF;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        padding-top: 5px
    }
    .modal-header-section .close{
        margin-top: -2.3em;
        margin-right: -1.5%;
    }


    /**Modal Cerrar*/

    /**Linea centro*/
    .modal-close .modal-close .close-line>div{
        border: 1px solid #D2D2D2;
        opacity: 1;
        margin-right: 10%;
        margin-left: 10%;
    }
    .modal-close .modal-close .close-line{
        margin: 25px;
    }

    /**Modal uno*/
    .option_confirm:hover{
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 1s; /* don't forget to set a duration! */
    }
    .form-control:focus{
        outline:none !important;
        outline-width: 0 !important;
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        border: 1px solid #C4C4C4!important;
    }

    /**table customer*/

    .header-task-monitor .state-title{
        width: 5%;
        vertical-align: middle;
    }
    .header-task-monitor .state-title .state-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor .customer{
        vertical-align: middle;
    }
    .header-task-monitor .customer .customer-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor .start-date{
        vertical-align: middle;
    }
    .header-task-monitor .start-date .start-date-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor .end-date{
        vertical-align: middle
    }
    .header-task-monitor .end-date .end-date-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor  .cycle{
        vertical-align: middle
    }
    .header-task-monitor  .cycle .task-cycle-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor .priority-title{
        vertical-align: middle
    }

    .header-task-monitor .priority-title .priority-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor .approval-title{
        vertical-align: middle;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }

    .hover-table{
        background-color: white !important;
    }
    .hover-table:hover{
        background-color: #f4f6f9 !important;
    }

    .edge-of-state{
        background: white;
        position: relative;
        border-radius: 8px;
    }
    .edge-of-state .customer-state-of-edge{
        position: absolute;
        left:-1.8em;
        top: 10px;
        background:white;
        width: 5px;
        height: 58px;
        border-radius: 0 3px 3px 0;
    }
    .name-state{
        text-align: left;
        font: normal normal normal 18px/22px 'Source Sans Pro';
        color: #FFFFFF;
        width: 171px;
        padding-top: 25px;
        padding-bottom: 25px;
        vertical-align: middle!important;
    }
    .table td, .table th {
        padding: 0.75rem;
        vertical-align: middle!important;
        border-top: 1px solid #dee2e6;
    }
    .showTask .name{
        text-align: left;
        font: normal normal normal 15px/19px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #777777;
        opacity: 1;
    }
    .showTask .img-state{
        text-align: left;
        font: normal normal normal 20px/25px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #414141;
        opacity: 1;
    }
    .start-date{
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        color: #414141;
    }
    .date-end{
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        color: #414141;
    }
}
@media (min-width: 1800px) and (max-width: 1890px){
    /**Menú*/
    .navbar {
        background: #FFFFFF 0% 0% no-repeat padding-box!important;
        box-shadow: 0px 3px 5px #8E8E8E29;
        opacity: 1;
        height: 103px;
    }
    .navbar .navbar-brand .savmanagemnet-logo{
        max-width: 290px;
        max-height: 33px;
    }
    .navbar .img-customer{
        text-align: right;
    }
    .navbar .img-customer .logo-customer{
        max-width: 110px;
        max-height: 53px;
    }
    .d-flex{
        width: 20%;
        text-align: right;
        margin-right: -10.5%;
    }
    .d-flex .close-section{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #646464;
        opacity: 1;
        border-radius: 10px;
        padding: 6px 13px 6px 13px;
        text-decoration: none!important;
        margin-top: 6px;
        text-align: center;
        font: normal normal 600 18px/23px 'Source Sans Pro';
        color: #4E4E4E;
    }
    .d-flex .close-section:hover{
        background: #E8E8E8 0% 0% no-repeat padding-box;
        border: 1px solid #646464;
        opacity: 1;
        border-radius: 10px;
        padding: 6px 13px 6px 13px;
        text-decoration: none!important;
        margin-top: 6px;
        text-align: center;
        font: normal normal 600 18px/23px 'Source Sans Pro';
        color: #4E4E4E;
    }
    .navbar .vl{
        border-left: 1px solid #CCCCCC;
        height: 40px;
        position: absolute;
        left: 88.2%;
        top: 35%;
    }

    /**Buscar*/

    .task-monitor-search{
        margin-top: 30px;
    }
    .task-monitor-search .form-control{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #C4C4C4!important;
        border-radius: 5px!important;
        color: #AAAAAA!important;
        opacity: 1;
        margin-left: 2%;
        margin-right: 2%;
        padding: 1.3em 2em 1.3em 2em;
    }
    .task-monitor-search>input:focus {
        outline:none !important;
        outline-width: 0 !important;
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        border: 1px solid #C4C4C4;
    }

    /**Resultados y actualizar*/
    .help-block{
        text-align: left;
        font: normal normal normal 20px/27px "Source Sans Pro";
        letter-spacing: 0px;
        color: #707070!important;
        opacity: 1;
        margin-left: 2.5%;
    }
    .number{
        margin-top: -1.7em!important;
        text-align: center;
        color: #FFFFFF;
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0;
        padding: 2px 6px 2px 6px!important;
    }

    #button_filter{
        background: #3F62A8 0% 0% no-repeat padding-box!important;
        border-radius: 5px;
        padding: 8px 15px 8px 15px!important;
        text-decoration: none!important;
        border: none!important;
        text-align: center;
        font: normal normal normal 18px/24px 'Source Sans Pro'!important;
        color: #FFFFFF!important;
        margin-right: 1em;
        margin-top: 0.5em;
        margin-bottom: 0.5em;
    }
    #button_filter:hover{
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 3s; /* don't forget to set a duration! */
    }
    #filter-panel{
        height: auto;
        position: absolute;
        width: 99.25%;
        z-index: 99;
        margin-top: -25px;
        margin-left: 1%;
        padding-right: 2.7em;
        padding-top: 25px;
    }
    .filter-panel-body{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        box-shadow: 0px 4px 6px #51515129;
        border-radius: 5px;
    }
    .filter-panel-body:before{
        content: "";
        position: absolute;
        top: -11.5px;
        right: 11.5em;
        width: 0;
        height: 0;
        border-width: 0 35px 35px;
        border-style: solid;
        border-color: transparent transparent #FFFFFF;
    }
    .filter-panel-body .dropdown-menu{
        border: transparent!important;
        background: #FFFFFF 0% 0% no-repeat padding-box!important;
        box-shadow: 0px 4px 6px #51515129!important;
    }
    .filter-panel-body .states-title{
        margin-left: 3.5em;
        padding-top: 2em;
    }
    .filter-panel-body .states-title>h1{
        text-align: left;
        font: normal normal 600 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
    }
    .filter-panel-body .filter-states{
        margin-top: 1.3em;
    }
    .filter-panel-body .filter-states .state_checkbox{
        margin-left: 3.5em;
    }

    .filter-panel-body>hr {
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
        border: 0;
        border-top: 1px solid #f3f2f2 !important;
        width: 95%;
    }

    .filter-panel-body .date_title{
        margin-left: 3.5em;
        margin-bottom: 1em;
    }
    .filter-panel-body .date_title>h1{
        text-align: left;
        font: normal normal 600 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
    }
    .filter-panel-body .separator{
        text-align: left;
        font: normal normal normal 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
        margin-top: 0.3em;
        margin-left: -9.6em;
    }
    .filter-panel-body .start_date{
        text-align: left;
        font: normal normal normal 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
        border: 2px solid #D2D2D2;
        border-radius: 5px;
        width: 188px;
        height: 46px;
        margin-left: 2.4em;
    }

    .filter-panel-body .icon-start-at{
        margin-top: -2.9em;
        margin-left: 12em;
        border: none!important;
        background: none!important;
    }
    .filter-panel-body .end_date{
        text-align: left;
        font: normal normal normal 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
        border: 2px solid #D2D2D2;
        border-radius: 5px;
        width: 188px;
        height: 46px;
        margin-left: 0.3em;
    }
    .filter-panel-body .icon-end-at{
        margin-top: -2.9em;
        margin-left: 9.4em;
        border: none!important;
        background: none!important;
    }
    .filter-panel-body .priority-title{
        margin-bottom: 1em;
    }
    .filter-panel-body .priority-title>h1{
        text-align: left;
        font: normal normal 600 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
    }

    .filter-panel-body .clean-filters{
        margin-left: 3.8em;
        padding-top: 0.9em;
    }
    .filter-panel-body .clean-filters .title{
        text-align: left;
        font: normal 600 normal 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #FF3434;
        cursor: pointer;
    }
    .filter-panel-body .clean-filters .title:hover{
        color:  #FF3434!important;
    }
    .filter-panel-body .filter-button{
        text-align: right;
        margin-left: -4.5em;
        margin-bottom: 2em;
        margin-top: 0.3rem;
    }
    .filter-panel-body .filter-button .close-filter{
        text-align: center;
        font: normal normal normal 18px/24px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #3F62A8;
        border: 2px solid #3F62A8;
        border-radius: 5px;
        padding: 8px 10px 8px 10px;
    }
    .filter-panel-body .filter-button .close-filter:hover{
        text-align: center;
        font: normal normal normal 18px/24px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #3F62A8;
        opacity: 1;
        background: #ffffff 0% 0% no-repeat padding-box;
        border: 2px solid #3F62A8;
        border-radius: 5px;
        padding: 8px 10px 8px 10px;
        box-shadow: 0px 0px 5px rgba(108, 108, 108, 0.39);
    }

    .filter-panel-body .filter-button .apply-filter{
        text-align: center;
        font: normal normal normal 18px/24px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #FFFFFF;
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 5px;
        padding: 9px 15px 9px 15px;
        margin-left: 1em;
    }
    .filter-panel-body .filter-button .apply-filter:hover{
        text-align: center;
        letter-spacing: 0px;
        border-radius: 5px;
        padding: 9px 15px 9px 15px;
        background: #3F62A8 0% 0% no-repeat padding-box;
        font: normal normal normal 18px/24px 'Source Sans Pro';
        color: #FFFFFF;
        box-shadow: 0px 0px 6px rgba(108, 108, 108, 0.56);
    }
    .update>a{
        text-align: left;
        font: normal normal 600 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070!important;
        opacity: 1;
        margin-right: 0.9em;
    }
    .update>button{
        background: transparent 0% 0% no-repeat padding-box;
        opacity: 1;
        border-radius: 5px;
        padding: 8px 15px 8px 15px;
        text-decoration: none!important;
        margin-top: 6px;
        text-align: center;
        font: normal normal 600 18px/23px 'Source Sans Pro';
        color: #707070;
    }
    .update>a{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        opacity: 1;
        border-radius: 5px;
        padding: 8px 15px 8px 15px;
        text-decoration: none!important;
        margin-top: 6px;
        text-align: center;
        font: normal normal 600 18px/23px 'Source Sans Pro';
        color: #707070;
    }
    .update>a:hover{
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 3s; /* don't forget to set a duration! */
    }
    /**body table*/
    .header-task-monitor{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        opacity: 1;
    }
    .header-task-monitor .text-center{
        padding: 20px 0px!important;
    }
    .header-task-monitor .customer{
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
        padding: 0px 0px 0px 20px;
    }
    .priority-class-customer-1{
        background: #6594FF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        margin-left: 30%;
        margin-right: 30%;
        padding-top: 2%;
        padding-bottom: 3%;
        text-align: center;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
    }
    .priority-class-customer-2{
        background: #1A3D8F 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        margin-left: 37%;
        margin-right: 37%;
        padding-top: 2%;
        padding-bottom: 3%;
    }
    .priority-class-customer-3{
        background: #757575 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        margin-left: 32%;
        margin-right: 32%;
        padding-top: 2%;
        padding-bottom: 3%;
    }
    .priority-class-customer-4{
        background: #FF6665 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        margin-left: 37%;
        margin-right: 37%;
        padding-top: 2%;
        padding-bottom: 3%;
    }
    .priority-class-customer-5{
        background: #FF3434 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        margin-left: 30%;
        margin-right: 30%;
        padding-top: 2%;
        padding-bottom: 3%;
    }

    .state-class-custom-8{
        background: #FF6D5D 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-2{
        background: #8B8B8B 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-3{
        background: #36B980 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-4{
        background: #1BA198 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-5{
        background: #5D9EFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-6{
        background: #FF5D5D 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-7{
        background: #FFAE36 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-1{
        background: #2D2D2D 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-9{
        background: #F456FF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-10{
        background: #5D7DFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-11{
        background: #685DFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }

    .days-task{
        text-align: center;
        font: normal normal normal 14px/18px Source Sans Pro;
        letter-spacing: 0px;
        color: #FFFFFF;
        opacity: 1;
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 5px;
        margin-left: 28%;
        margin-right: 28%;
        padding-top: 3%;
        padding-bottom: 4%;
    }
    .undo-evaluate {
        text-decoration: none !important;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF !important;
    }
    .undo-button-evaluate {
        background: #FFB114 0% 0% no-repeat padding-box;
        box-shadow: 0px 2px 4px #00000029;
        border-radius: 5px;
        opacity: 1;
        cursor: pointer;
        padding-left: 50px;
    }
    .undo-button-evaluate:hover{
        background: #FFB114 0% 0% no-repeat padding-box;
        box-shadow: 0px 2px 4px #00000029;
        border-radius: 5px;
        opacity: 1;
        cursor: pointer;
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 1s; /* don't forget to set a duration! */
    }
    .evaluate{
        text-decoration: none!important;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF!important;
        opacity: 1;
        padding-left: 18px;
    }
    .button-evaluate{
        background: #7896FB 0% 0% no-repeat padding-box;
        box-shadow: 0px 2px 4px #00000029;
        border-radius: 5px;
        opacity: 1;
    }
    .button-evaluate:hover{
        background: #7896FB 0% 0% no-repeat padding-box;
        box-shadow: 0px 2px 4px #00000029;
        border-radius: 5px;
        opacity: 1;
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 1s; /* don't forget to set a duration! */
    }
    .img-evaluate{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    /**Modal dialog*/
    .modal-dialog .modal-content .modal-body .modal-card{
        box-shadow: 0px 0px 6px #00000029;
        border-radius: 5px;
        opacity: 1;
        width: 320px;
        height: 334px;
        margin-left: 12%;
        margin-top: 3%;
        margin-bottom: 3%;
    }
    .modal-dialog .modal-content .modal-body .two-modal-card{
        box-shadow: 0px 0px 6px #00000029;
        border-radius: 5px;
        opacity: 1;
        width: 320px;
        height: 334px;
        margin-left: 2%;
        margin-top: 3%;
        margin-bottom: 3%;
    }
    .modal-dialog .modal-content .modal-body .modal-card .text-modal-monitor{
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
        padding-left: 7%;
        padding-right: 7%;
    }
    .modal-dialog .modal-content .modal-body .two-modal-card .text-modal-monitor{
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
        padding-left: 7%;
        padding-right: 7%;
    }
    .modal-dialog .modal-content .modal-body .modal-card .text-modal-monitor .bold-text{
        text-align: center;
        font: normal normal 600 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
    }
    .modal-dialog .modal-content .modal-body .two-modal-card .text-modal-monitor .bold-text{
        text-align: center;
        font: normal normal 600 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
    }
    .modal-dialog .modal-content .modal-header .modal-title{
        text-align: left;
        font: normal normal 600 24px/20px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3F62A8;
        opacity: 1;
        margin-top: 0.2em;
        margin-left: -19em;
    }
    .modal-dialog .modal-content .modal-header{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        box-shadow: 0px 1px 5px #5B5B5B29;
        border-radius: 10px 10px 0px 0px;
        opacity: 1;
    }
    .modal-dialog .modal-content .modal-body>p{
        text-align: left;
        font: normal normal normal 20px/25px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
        opacity: 1;
        padding-left: 6%;
        padding-right: 8%;
        margin-top: 1%;
    }
    .modal-dialog .modal-content .modal-footer .cancel-modal-approval{
        text-align: center;
        font: normal normal 600 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3F62A8;
        text-shadow:  0px 3px 6px #FFFFFF29;
        opacity: 1;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #3F62A8;
        border-radius: 5px;
        padding: 6px 10px 6px 10px;
    }
    .modal-dialog .modal-content .modal-footer .cancel-modal-approval:hover{
        text-align: center;
        font: normal normal 600 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3F62A8;
        opacity: 1;
        background: #ffffff 0% 0% no-repeat padding-box;
        border: 1px solid #3F62A8;
        border-radius: 5px;
        padding: 6px 10px 6px 10px;
        box-shadow: 0px 0px 5px rgba(108, 108, 108, 0.39);
    }
    .modal-dialog .modal-content .modal-footer .confirm-modal-approval{
        text-align: center;
        letter-spacing: 0px;
        opacity: 1;
        border: 1px solid #3F62A8;
        border-radius: 5px;
        padding: 6px 10px 6px 10px;
        background: #3F62A8 0% 0% no-repeat padding-box;
        font: normal normal normal 18px/23px "Source Sans Pro";
        color: #FFFFFF;
        text-shadow:  0px 3px 6px #FFFFFF29;
    }
    .modal-dialog .modal-content .modal-footer .confirm-modal-approval:hover{
        text-align: center;
        letter-spacing: 0px;
        opacity: 1;
        border: 1px solid #4168B6FF;
        border-radius: 5px;
        padding: 6px 10px 6px 10px;
        background: #4168b6 0% 0% no-repeat padding-box;
        font: normal normal normal 18px/23px "Source Sans Pro";
        color: #FFFFFF;
        box-shadow: 0px 0px 6px rgba(108, 108, 108, 0.56);
    }
    .modal-dialog .modal-content{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border-radius: 10px;
        opacity: 1;
    }

    .active{
        background: #f4f6f9!important;

    }

    .modal-dialog .modal-content .modal-body .title-one{
        text-align: left;
        font: normal normal normal 20px/25px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
        margin-top: 5%;
        margin-left: 23%;
    }
    .modal-dialog .modal-content .modal-body .title-two{
        text-align: left;
        font: italic normal 600 20px/25px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #484848;
        margin-left: 23%;
    }
    .modal-dialog .modal-content .modal-body .body-one{
        margin-top: 4%;
        background: #E8EDFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        text-align: left;
        font: normal normal bold 16px/20px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #212E58;
        opacity: 1;
        margin-right: 19.5em;
        padding-left: 2%;
        margin-left: 23%;
    }
    .modal-dialog .modal-content .modal-body .body-two{
        text-align: left;
        font: normal normal normal 16px/20px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #484848;
        margin-top: 3%;
        margin-right: 5%;
        margin-left: 23%;
    }

    .modal-dialog .modal-content .modal-body .body-three{
        text-align: left;
        font: normal normal 600 16px/20px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
        margin-right: 5%;
    }
    .modal-dialog .modal-content .modal-body .body-four{
        text-align: left;
        font: normal normal normal 16px/20px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #484848;
        margin-top: 2%;
        margin-right: 5%;
        margin-left: 23%;
    }

    /**table*/
    .accent-fuchsia .page-item.active .page-link {
        background-color: #FFFFFF!important;
        border: none!important;
        color: black;!important;
    }
    .accent-fuchsia .page-item{
        margin: 0.2em;
    }
    .accent-fuchsia .page-item .page-link {
        background-color: #ECECEC!important;
        border: none!important;
        color: black;!important;
        border-radius: 100%;
        width: 100%;
    }
    .accent-fuchsia .page-item .page-link:hover {
        background-color: #E2E2E2!important;
        border: none!important;
        color: black;!important;
        border-radius: 100%;
        width: 100%;
    }
    table, tr, td{
        border:none!important;
    }
    table, thead, th{
        border: none!important;
    }


    /**Modal secciones*/
    .three-modal-title{
        text-align: left;
        font: normal normal 600 24px/20px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3F62A8!important;
        opacity: 1;
        margin-left:3%;
        margin-top: -0.8em;
    }
    .form-control-8{
        background: #FF6D5D 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 220px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 76.5%;
        margin-top: -1.9em
    }
    .form-control-2{
        background: #8B8B8B 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 120px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 82%;
        margin-top: -1.9em
    }
    .form-control-3{
        background: #36B980 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 120px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 82%;
        margin-top: -1.9em
    }
    .form-control-4{
        background: #1BA198 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 235px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 75.5%;
        margin-top: -1.9em
    }
    .form-control-5{
        background: #5D9EFF 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 160px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 80%;
        margin-top: -1.9em
    }
    .form-control-6{
        background: #FF5D5D 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 180px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 78%;
        margin-top: -1.9em
    }
    .form-control-7{
        background: #FFAE36 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 230px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 76%;
        margin-top: -1.9em
    }
    .form-control-1{
        background: #2D2D2D 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 190px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 78%;
        margin-top: -1.9em
    }
    .form-control-9{
        background: #F456FF 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 250px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 75%;
        margin-top: -1.9em
    }
    .form-control-10{
        background: #5D7DFF 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 140px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 81%;
        margin-top: -1.9em
    }
    .form-control-11{
        background: #685DFF 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 90px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 84%;
        margin-top: -1.9em
    }
    .modal-body{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        box-shadow: 0px 1px 5px #5B5B5B29;
        border-radius: 10px 10px 0px 0px;
        opacity: 1;
        padding-bottom: 2%;
    }
    .modal-text-section .section{
        border-right: 1px solid #D2D2D2;
        transition: all 0.5s;
        padding-right: 16px;
        word-break: break-all;
    }
    .modal-text-section .section .section-title{
        text-align: left;
        font: normal normal 600 22px/28px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #484848;
        opacity: 1;
        margin-top: 5%;
        margin-left: 10%;
        margin-bottom: 2%
    }
    .modal-text-section .vl{
        border: 1px solid #D2D2D2;
        height: 894px;
        position: absolute;
        left: 94%;
        margin-left: -3px;
        top: 0;
    }
    .modal-text-section .line{
        border: 1px solid #D2D2D2;
        height: 894px;
        position: absolute;
        left: 99%;
        margin-left: -3px;
        top: 0;
    }
    .modal-text-section .date{
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #4A4A4A;
        opacity: 1;
        margin-left: 4%;
        margin-top: 4%;
    }
    .modal-text-section .section-evaluate{
        background: #7896FB 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        width: 120px;
        height: 35px;
        padding-top: 5px;
        margin-left: 83%;
        margin-top: -3em;
        text-align: center;
    }
    .modal-text-section .section-evaluate:hover{
        background: #7896FB 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        width: 120px;
        height: 35px;
        padding-top: 5px;
        margin-left: 83%;
        margin-top: -3em;
        text-align: center;
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 1s; /* don't forget to set a duration! */
    }
    .modal-text-section .section-undo-evaluate{
        background: #FFB114 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        width: 180px;
        height: 35px;
        padding-top: 5px;
        margin-left: 78.5%;
        margin-top: -3em;
        text-align: center;
    }
    .modal-text-section .sections-evaluate{
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF!important;
        opacity: 1;
        text-decoration: none!important;
    }
    .modal-text-section .section-undo-evaluate:hover{
        background: #FFB114 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        width: 180px;
        height: 35px;
        padding-top: 5px;
        margin-left: 78.5%;
        margin-top: -3em;
        text-align: center;
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 1s; /* don't forget to set a duration! */
    }
    .modal-text-section .valign-middle-img{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        width: 120px;
        height: 35px;
        padding-top: 5px;
        margin-left: 85.5%;
        margin-top: -3em;
    }
    .modal-text-section .option_{
        margin-bottom: 0.6em;
        margin-top: 0.6em;
        margin-right: 5%;
    }
    .modal-text-section .option_:hover{
        background: #CCCCCC;
    }
    .modal-text-section .active-button{
        background: #F1F1F1;
    }
    .modal-text-section .dropdown-item:active {
        color: #fff;
        text-decoration: none;
        background-color: #F1F1F1;
    }

    /**Linea centro*/
    .center_line>div{
        border: 1px solid #D2D2D2;
        opacity: 1;
        margin-right: 4%;
        margin-left: 2%;
    }
    .center_line{
        margin: 25px;
    }
    .modal-text-section .title{
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #222E58;
        opacity: 1;
        cursor: pointer;
    }
    .modal-text-section .title:hover{
        color: #222E58;
        cursor: pointer;
    }

    /***/
    .dropdown-toggle .title{
        margin-left: 20%;
        background: #FFFFFF;
    }
    .footer{
        text-align: right;
        margin-left: 48em;
        margin-bottom: 1em;
    }
    .footer>button{
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        padding: 10px 20px 10px 20px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        text-shadow: 0px 3px 6px #FFFFFF29;
        border: 1px solid #4168B6FF;
        box-shadow: 0px 0px 6px transparent;
    }
    .footer>button:hover{
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        padding: 10px 20px 10px 20px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        text-shadow: 0px 3px 6px #FFFFFF29;
        border: 1px solid #4168B6FF;
        box-shadow: 0px 0px 6px rgba(108, 108, 108, 0.56);
    }
    .footer>button:focus{
        outline:none !important;
        outline-width: 0 !important;
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        border: 1px solid #3F62A8;
    }
    .archive-task-monitor{
        background: #F1F1F1  0% 0% no-repeat padding-box;
        box-shadow: 0px 0px 4px #00000029;
        border-radius: 5px;
        opacity: 1;
        margin-left: 20px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3E3E3E!important;
        text-shadow:  0px 3px 6px #FFFFFF29;
        border: none!important;
        padding: 5px 12px 5px 12px;
    }
    .comment-task-monitor{
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848!important;
    }
    .include-task-monitor{
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848!important;
        padding: 2em 2em 2em 2em;
        border-radius: 5px;
        background: #F1F1F1 0% 0% no-repeat padding-box;
        border: 1px solid #E9E9E9;
    }
    .include-task-monitor:hover{
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848!important;
        padding: 2em 2em 2em 2em;
        border-radius: 5px;
        background: #F1F1F1 0% 0% no-repeat padding-box;
        box-shadow: 0px 0px 4px rgba(108, 108, 108, 0.39);
        border: 1px solid #E9E9E9;
    }
    nav svg{
        height: 20px;
    }
    nav span{
        text-align: left;
        font: normal normal normal 20px/27px "Source Sans Pro";
        letter-spacing: 0px;
        color: #707070;
        opacity: 1;
    }


    /**Modal*/

    .not-confirm-on-state-change{
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        letter-spacing: 0px;
        color: #FFFFFF;
        text-shadow:  0px 3px 6px #FFFFFF29;
        width: 90px;
        height: 35px;
        border: 1px solid #4168B6FF;
        padding: 6px 10px 6px 10px;
        background: #4168b6 0% 0% no-repeat padding-box;
        font: normal normal normal 18px/23px "Source Sans Pro";
        box-shadow: 0px 0px 6px transparent;
    }
    .not-confirm-on-state-change:hover{
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        letter-spacing: 0px;
        color: #FFFFFF;
        text-shadow:  0px 3px 6px #FFFFFF29;
        width: 90px;
        height: 35px;
        border: 1px solid #4168B6FF;
        padding: 6px 10px 6px 10px;
        background: #4168b6 0% 0% no-repeat padding-box;
        font: normal normal normal 18px/23px "Source Sans Pro";
        box-shadow: 0px 0px 6px rgba(108, 108, 108, 0.56);
    }
    .not-confirm-on-state-change:focus{
        outline:none !important;
        outline-width: 0 !important;
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        border: 1px solid #3F62A8;
    }
    .confirm-on-state-change {
        font: normal normal 600 18px/23px 'Source Sans Pro';
        color: #3F62A8;
        text-shadow:  0px 3px 6px #FFFFFF29;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #3F62A8;
        border-radius: 5px;
        opacity: 1;
        width: 90px;
        height: 35px;
        margin-top: 20px;
        text-align: center;
        padding: 6px 10px 6px 10px;
    }
    .confirm-on-state-change:hover {
        text-shadow:  0px 3px 6px #FFFFFF29;
        border-radius: 5px;
        opacity: 1;
        width: 90px;
        height: 35px;
        margin-top: 20px;
        text-align: center;
        font: normal normal 600 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3F62A8;
        background: #ffffff 0% 0% no-repeat padding-box;
        border: 1px solid #3F62A8;
        padding: 6px 10px 6px 10px;
        box-shadow: 0px 0px 5px rgba(108, 108, 108, 0.39);
    }
    /** Modal de rechazo  **/
    #undoModal .process{
        font: normal normal 600 18px/23px 'Source Sans Pro';
        color: #474747;
        text-shadow:  0px 3px 6px #FFFFFF29;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #464646;
        border-radius: 5px;
        opacity: 1;
        margin-top: 30px;
        text-align: center;
        padding: 5px 2em 5px 2em;
    }
    /** Calificación**/

    #task_monitor_confirmModal .process{
        font: normal normal 600 18px/23px 'Source Sans Pro';
        color: #3F62A8;
        text-shadow:  0px 3px 6px #3F62A8;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #3F62A8;
        border-radius: 5px;
        opacity: 1;
        margin-top: 40px;
        text-align: center;
        padding: 5px 2em 5px 2em;
    }
    /**
      CUSTOM PAGINATOR
     */
    /**Paginación*/

    .page-item{
        background: #ECECEC!important;
    }
    .page-link{
        text-align: center;
        font: normal normal normal 20px/25px "Source Sans Pro";
        letter-spacing: 0px;
        color: #414141!important;
        opacity: 1;
        margin: 0.5em;
        border-radius: 100%!important;
    }

    .current-page{
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 20px!important;
        opacity: 1;
        color: #FFFFFF;
        padding: 1px 8px 1px 8px;
    }
    .custom_paginator .pagination li.page-item.disabled>span{
        background: #E2E2E2!important;
        color: #414141 !important;
    }
    .custom_paginator .pagination li.page-item.active>span,
    .custom_paginator .pagination li.page-item.active>span{
        text-align: center;
        color: #FFFFFF!important;
        border-radius: 100%!important;
        width: 100%;
        background: #3F62A8!important;
    }

    .custom_paginator .pagination li:first-child>button,
    .custom_paginator .pagination li:first-child>span,
    .custom_paginator .pagination li:last-child>button,
    .custom_paginator .pagination li:last-child>span{
        text-align: center;
        color: #fff0f0!important;
        border-radius: 100%!important;
        max-width: 100%;
        background: #3F62A8!important;
        /*width: 2em!important;*/
    }

    .custom_paginator .pagination li:first-child>button:hover,
    .custom_paginator .pagination li:last-child>button:hover{
        text-align: center;
        color: #FFFFFF!important;
        max-width: 100%;
        border-radius: 100%!important;
        background: #3F62A8!important;
    }
    /**Modal de secciones**/
    .modal-header-section .reloj{
        width: 120px;
        height: 35px;
        border: 1px solid #B8B8B8!important;
        background: #FFFFFF!important;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #757575;
        margin-left: 90.5%;
        margin-top: -2.3em
    }

    .modal-header-section .type-state{
        text-align: center;
        color: #FFFFFF;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        padding-top: 5px
    }
    .modal-header-section .close{
        margin-top: -2.3em;
        margin-right: -1.5%;
    }


    /**Modal Cerrar*/

    /**Linea centro*/
    .modal-close .modal-close .close-line>div{
        border: 1px solid #D2D2D2;
        opacity: 1;
        margin-right: 10%;
        margin-left: 10%;
    }
    .modal-close .modal-close .close-line{
        margin: 25px;
    }

    /**Modal uno*/
    .option_confirm:hover{
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 1s; /* don't forget to set a duration! */
    }
    .form-control:focus{
        outline:none !important;
        outline-width: 0 !important;
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        border: 1px solid #C4C4C4!important;
    }

    /**table customer*/

    .header-task-monitor .state-title{
        width: 5%;
        vertical-align: middle;
    }
    .header-task-monitor .state-title .state-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor .customer{
        vertical-align: middle;
    }
    .header-task-monitor .customer .customer-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor .start-date{
        vertical-align: middle;
    }
    .header-task-monitor .start-date .start-date-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor .end-date{
        vertical-align: middle
    }
    .header-task-monitor .end-date .end-date-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor .cycle{
        vertical-align: middle
    }
    .header-task-monitor .cycle .task-cycle-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor .priority-title{
        vertical-align: middle
    }

    .header-task-monitor .priority-title .priority-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor .approval-title{
        vertical-align: middle;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }

    .hover-table{
        background-color: white !important;
    }
    .hover-table:hover{
        background-color: #f4f6f9 !important;
    }

    .edge-of-state{
        background: white;
        position: relative;
        border-radius: 8px;
    }
    .edge-of-state .customer-state-of-edge{
        position: absolute;
        left:-1.8em;
        top: 10px;
        background:white;
        width: 5px;
        height: 58px;
        border-radius: 0 3px 3px 0;
    }
    .name-state{
        text-align: left;
        font: normal normal normal 18px/22px 'Source Sans Pro';
        color: #FFFFFF;
        width: 171px;
        padding-bottom: 25px;
        padding-top: 25px;
        vertical-align: middle!important;
    }
    .showTask .name{
        text-align: left;
        font: normal normal normal 15px/19px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #777777;
        opacity: 1;
    }
    .table td, .table th {
        padding: 0.75rem;
        vertical-align: middle!important;
        border-top: 1px solid #dee2e6;
    }
    .showTask .img-state{
        text-align: left;
        font: normal normal normal 20px/25px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #414141;
        opacity: 1;
    }
    .start-date{
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        color: #414141;
    }
    .date-end{
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        color: #414141;
    }
}

@media (min-width: 1890px) and (max-width: 2000px){
    /**Menú*/
    .navbar {
        background: #FFFFFF 0% 0% no-repeat padding-box!important;
        box-shadow: 0px 3px 5px #8E8E8E29;
        opacity: 1;
        height: 103px;
    }
    .navbar .navbar-brand .savmanagemnet-logo{
        max-width: 290px;
        max-height: 33px;
    }
    .navbar .img-customer{
        text-align: right;
    }
    .navbar .img-customer .logo-customer{
        max-width: 110px;
        max-height: 53px;
    }
    .d-flex{
        width: 20%;
        text-align: right;
        margin-right: -11.4%;
    }
    .d-flex .close-section{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #646464;
        opacity: 1;
        border-radius: 10px;
        padding: 6px 13px 6px 13px;
        text-decoration: none!important;
        margin-top: 6px;
        text-align: center;
        font: normal normal 600 18px/23px 'Source Sans Pro';
        color: #4E4E4E;
    }
    .d-flex .close-section:hover{
        background: #E8E8E8 0% 0% no-repeat padding-box;
        border: 1px solid #646464;
        opacity: 1;
        border-radius: 10px;
        padding: 6px 13px 6px 13px;
        text-decoration: none!important;
        margin-top: 6px;
        text-align: center;
        font: normal normal 600 18px/23px 'Source Sans Pro';
        color: #4E4E4E;
    }
    .navbar .vl{
        border-left: 1px solid #CCCCCC;
        height: 40px;
        position: absolute;
        left: 88.8%;
        top: 35%;
    }

    /**Buscar*/
    .task-monitor-search{
        margin-top: 10px;
    }
    .task-monitor-search .form-control{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #C4C4C4!important;
        border-radius: 5px!important;
        color: #AAAAAA!important;
        opacity: 1;
        margin-left: 2.2%;
        margin-right: 1.8%;
        padding: 1.3em 2em 1.3em 2em;
    }
    .task-monitor-search>input:focus {
        outline:none !important;
        outline-width: 0 !important;
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        border: 1px solid #C4C4C4;
    }

    /**Resultados y actualizar*/
    .help-block{
        text-align: left;
        font: normal normal normal 20px/27px "Source Sans Pro";
        letter-spacing: 0px;
        color: #707070!important;
        opacity: 1;
        margin-left: 2.5%;
    }
    .number{
        margin-top: -1.7em;
        text-align: center;
        color: #FFFFFF;
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0;
        padding: 2px 6px 2px 6px;
    }

    #button_filter{
        background: #3F62A8 0% 0% no-repeat padding-box!important;
        border-radius: 5px;
        padding: 8px 15px 8px 15px!important;
        text-decoration: none!important;
        border: none!important;
        text-align: center;
        font: normal normal normal 18px/24px 'Source Sans Pro'!important;
        color: #FFFFFF!important;
        margin-right: 1em;
        margin-top: 0.5em;
        margin-bottom: 0.5em;
    }
    #button_filter:hover{
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 3s; /* don't forget to set a duration! */
    }
    #filter-panel{
        height: auto;
        position: absolute;
        width: 99.25%;
        z-index: 99;
        margin-top: -25px;
        margin-left: 1%;
        padding-right: 2.7em;
        padding-top: 35px;
    }
    .filter-panel-body{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        box-shadow: 0px 4px 6px #51515129;
        border-radius: 5px;
    }
    .filter-panel-body:before{
        content: "";
        position: absolute;
        top: -11.5px;
        right: 11.5em;
        width: 0;
        height: 0;
        border-width: 0 35px 35px;
        border-style: solid;
        border-color: transparent transparent #FFFFFF;
    }
    .filter-panel-body .dropdown-menu{
        border: transparent!important;
        background: #FFFFFF 0% 0% no-repeat padding-box!important;
        box-shadow: 0px 4px 6px #51515129!important;
    }
    .filter-panel-body #states-block{
        padding-right: 25em
    }
    .filter-panel-body .states-title{
        margin-left: 4.5em;
        padding-top: 2em;
    }
    .filter-panel-body .states-title>h1{
        text-align: left;
        font: normal normal 600 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
    }
    .filter-panel-body .filter-states{
        margin-top: 1.3em;
    }
    .filter-panel-body .filter-states .state_checkbox{
        margin-left: 4.5em;
    }

    .filter-panel-body>hr {
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
        border: 0;
        border-top: 1px solid #f3f2f2 !important;
        width: 95%;
    }

    .filter-panel-body .date_title{
        margin-left: 4.5em;
        margin-bottom: 1em;
    }
    .filter-panel-body .date_title>h1{
        text-align: left;
        font: normal normal 600 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
    }
    .filter-panel-body .separator{
        text-align: left;
        font: normal normal normal 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
        margin-top: 0.3em;
        margin-left: -9.3em;
    }
    .filter-panel-body .start_date{
        text-align: left;
        font: normal normal normal 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
        border: 2px solid #D2D2D2;
        border-radius: 5px;
        width: 188px;
        height: 46px;
        margin-left: 3.1em;
    }

    .filter-panel-body .icon-start-at{
        margin-top: -2.9em;
        margin-left: 12.9em;
        border: none!important;
        background: none!important;
    }
    .filter-panel-body .end_date{
        text-align: left;
        font: normal normal normal 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
        border: 2px solid #D2D2D2;
        border-radius: 5px;
        width: 188px;
        height: 46px;
        margin-left: 0.3em;
    }
    .filter-panel-body .icon-end-at{
        margin-top: -2.9em;
        margin-left: 9.4em;
        border: none!important;
        background: none!important;
    }
    .filter-panel-body .priority-title{
        margin-bottom: 1em;
    }
    .filter-panel-body .priority-title>h1{
        text-align: left;
        font: normal normal 600 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
    }

    .filter-panel-body .clean-filters{
        margin-left: 4.8em;
        padding-top: 0.9em;
    }
    .filter-panel-body .clean-filters .title{
        text-align: left;
        font: normal 600 normal 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #FF3434;
        cursor: pointer;
    }
    .filter-panel-body .clean-filters .title:hover{
        color:  #FF3434!important;
    }
    .filter-panel-body .filter-button{
        text-align: right;
        margin-left: -4.5em;
        margin-bottom: 2em;
        margin-top: 0.3rem;
    }
    .filter-panel-body .filter-button .close-filter{
        text-align: center;
        font: normal normal normal 18px/24px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #3F62A8;
        border: 2px solid #3F62A8;
        border-radius: 5px;
        padding: 8px 10px 8px 10px;
    }
    .filter-panel-body .filter-button .close-filter:hover{
        text-align: center;
        font: normal normal normal 18px/24px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #3F62A8;
        opacity: 1;
        background: #ffffff 0% 0% no-repeat padding-box;
        border: 2px solid #3F62A8;
        border-radius: 5px;
        padding: 8px 10px 8px 10px;
        box-shadow: 0px 0px 5px rgba(108, 108, 108, 0.39);
    }

    .filter-panel-body .filter-button .apply-filter{
        text-align: center;
        font: normal normal normal 18px/24px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #FFFFFF;
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 5px;
        padding: 9px 15px 9px 15px;
        margin-left: 1em;
    }
    .filter-panel-body .filter-button .apply-filter:hover{
        text-align: center;
        letter-spacing: 0px;
        border-radius: 5px;
        padding: 9px 15px 9px 15px;
        background: #3F62A8 0% 0% no-repeat padding-box;
        font: normal normal normal 18px/24px 'Source Sans Pro';
        color: #FFFFFF;
        box-shadow: 0px 0px 6px rgba(108, 108, 108, 0.56);
    }
    .update>a{
        text-align: left;
        font: normal normal 600 16px/21px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #575757!important;
        opacity: 1;
        margin-right: 0.8em;
    }
    .update>button{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        opacity: 1;
        border-radius: 5px;
        padding: 8px 15px 8px 15px!important;
        text-decoration: none!important;
        margin-top: 6px;
        text-align: center;
        font: normal normal 600 18px/24px 'Source Sans Pro';
        color: #4E4E4E;
    }
    .update>a{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        opacity: 1;
        border-radius: 5px;
        padding: 8px 15px 8px 15px!important;
        text-decoration: none!important;
        margin-top: 10px;
        text-align: center;
        font: normal normal 600 18px/24px 'Source Sans Pro';
        color: #4E4E4E;
    }
    .update>a:hover{
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 3s; /* don't forget to set a duration! */
    }

    /**body table*/
    .header-task-monitor{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        opacity: 1;
    }

    .header-task-monitor .customer{
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
        padding: 0px 0px 0px 20px;
    }
    .header-task-monitor .text-center{
        padding: 20px 0px!important;
    }
    .priority-class-customer-1{
        background: #6594FF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        margin-left: 30%;
        margin-right: 30%;
        padding-top: 2%;
        padding-bottom: 3%;
        text-align: center;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
    }
    .priority-class-customer-2{
        background: #1A3D8F 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        margin-left: 37%;
        margin-right: 37%;
        padding-top: 2%;
        padding-bottom: 3%;
    }
    .priority-class-customer-3{
        background: #757575 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        margin-left: 32%;
        margin-right: 32%;
        padding-top: 2%;
        padding-bottom: 3%;
    }
    .priority-class-customer-4{
        background: #FF6665 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        margin-left: 37%;
        margin-right: 37%;
        padding-top: 2%;
        padding-bottom: 3%;
    }
    .priority-class-customer-5{
        background: #FF3434 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        margin-left: 30%;
        margin-right: 30%;
        padding-top: 2%;
        padding-bottom: 3%;
    }

    .state-class-custom-8{
        background: #FF6D5D 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-2{
        background: #8B8B8B 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-3{
        background: #36B980 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-4{
        background: #1BA198 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-5{
        background: #5D9EFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-6{
        background: #FF5D5D 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-7{
        background: #FFAE36 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-1{
        background: #2D2D2D 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-9{
        background: #F456FF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-10{
        background: #5D7DFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-11{
        background: #685DFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }

    .days-task{
        text-align: center;
        font: normal normal normal 14px/18px Source Sans Pro;
        letter-spacing: 0px;
        color: #FFFFFF;
        opacity: 1;
        background: #3F62A8 0% 0% no-repeat padding-box!important;
        border-radius: 5px;
        margin-left: 28%;
        margin-right: 28%;
        padding-top: 3%;
        padding-bottom: 4%;
    }
    .undo-evaluate {
        text-decoration: none !important;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF !important;
        margin-left: 5%;
    }
    .undo-button-evaluate {
        background: #FFB114 0% 0% no-repeat padding-box;
        box-shadow: 0px 2px 4px #00000029;
        border-radius: 5px;
        opacity: 1;
        cursor: pointer;
        padding-left: 50px;
        width: 142px;
    }
    .undo-button-evaluate:hover{
        background: #FFB114 0% 0% no-repeat padding-box;
        box-shadow: 0px 2px 4px #00000029;
        border-radius: 5px;
        opacity: 1;
        cursor: pointer;
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 1s; /* don't forget to set a duration! */
    }
    .evaluate{
        text-decoration: none!important;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF!important;
        opacity: 1;
        padding-left: 5%;
    }
    .button-evaluate{
        background: #7896FB 0% 0% no-repeat padding-box;
        box-shadow: 0px 2px 4px #00000029;
        border-radius: 5px;
        opacity: 1;
    }
    .button-evaluate:hover{
        background: #7896FB 0% 0% no-repeat padding-box;
        box-shadow: 0px 2px 4px #00000029;
        border-radius: 5px;
        opacity: 1;
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 1s; /* don't forget to set a duration! */
    }
    .img-evaluate{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    /**Modal dialog*/
    .modal-dialog .modal-content .modal-body .modal-card{
        box-shadow: 0px 0px 6px #00000029;
        border-radius: 5px;
        opacity: 1;
        width: 320px;
        height: 334px;
        margin-left: 12%;
        margin-top: 3%;
        margin-bottom: 3%;
    }
    .modal-dialog .modal-content .modal-body .two-modal-card{
        box-shadow: 0px 0px 6px #00000029;
        border-radius: 5px;
        opacity: 1;
        width: 320px;
        height: 334px;
        margin-left: 2%;
        margin-top: 3%;
        margin-bottom: 3%;
    }
    .modal-dialog .modal-content .modal-body .modal-card .text-modal-monitor{
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
        padding-left: 7%;
        padding-right: 7%;
    }
    .modal-dialog .modal-content .modal-body .two-modal-card .text-modal-monitor{
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
        padding-left: 7%;
        padding-right: 7%;
    }
    .modal-dialog .modal-content .modal-body .modal-card .text-modal-monitor .bold-text{
        text-align: center;
        font: normal normal 600 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
    }
    .modal-dialog .modal-content .modal-body .two-modal-card .text-modal-monitor .bold-text{
        text-align: center;
        font: normal normal 600 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
    }
    .modal-dialog .modal-content .modal-header .modal-title{
        text-align: left;
        font: normal normal 600 24px/20px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3F62A8;
        opacity: 1;
        margin-top: 0.2em;
        margin-left: -19em;
    }
    .modal-dialog .modal-content .modal-header{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        box-shadow: 0px 1px 5px #5B5B5B29;
        border-radius: 10px 10px 0px 0px;
        opacity: 1;
    }
    .modal-dialog .modal-content .modal-body>p{
        text-align: left;
        font: normal normal normal 20px/25px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
        opacity: 1;
        padding-left: 6%;
        padding-right: 8%;
        margin-top: 1%;
    }
    .modal-dialog .modal-content .modal-footer .cancel-modal-approval{
        text-align: center;
        font: normal normal 600 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3F62A8;
        text-shadow:  0px 3px 6px #FFFFFF29;
        opacity: 1;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #3F62A8;
        border-radius: 5px;
        padding: 6px 10px 6px 10px;
    }
    .modal-dialog .modal-content .modal-footer .cancel-modal-approval:hover{
        text-align: center;
        font: normal normal 600 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3F62A8;
        opacity: 1;
        background: #ffffff 0% 0% no-repeat padding-box;
        border: 1px solid #3F62A8;
        border-radius: 5px;
        padding: 6px 10px 6px 10px;
        box-shadow: 0px 0px 5px rgba(108, 108, 108, 0.39);
    }
    .modal-dialog .modal-content .modal-footer .confirm-modal-approval{
        text-align: center;
        letter-spacing: 0px;
        opacity: 1;
        border: 1px solid #3F62A8;
        border-radius: 5px;
        padding: 6px 10px 6px 10px;
        background: #3F62A8 0% 0% no-repeat padding-box;
        font: normal normal normal 18px/23px "Source Sans Pro";
        color: #FFFFFF;
        text-shadow:  0px 3px 6px #FFFFFF29;
    }
    .modal-dialog .modal-content .modal-footer .confirm-modal-approval:hover{
        text-align: center;
        letter-spacing: 0px;
        opacity: 1;
        border: 1px solid #4168B6FF;
        border-radius: 5px;
        padding: 6px 10px 6px 10px;
        background: #4168b6 0% 0% no-repeat padding-box;
        font: normal normal normal 18px/23px "Source Sans Pro";
        color: #FFFFFF;
        box-shadow: 0px 0px 6px rgba(108, 108, 108, 0.56);
    }
    .modal-dialog .modal-content{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border-radius: 10px;
        opacity: 1;
    }

    .active{
        background: #f4f6f9!important;

    }

    .modal-dialog .modal-content .modal-body .title-one{
        text-align: left;
        font: normal normal normal 20px/25px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
        margin-top: 5%;
        margin-left: 23%;
    }
    .modal-dialog .modal-content .modal-body .title-two{
        text-align: left;
        font: italic normal 600 20px/25px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #484848;
        margin-left: 23%;
    }
    .modal-dialog .modal-content .modal-body .body-one{
        margin-top: 4%;
        background: #E8EDFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        text-align: left;
        font: normal normal bold 16px/20px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #212E58;
        opacity: 1;
        margin-right: 19.5em;
        padding-left: 2%;
        margin-left: 23%;
    }
    .modal-dialog .modal-content .modal-body .body-two{
        text-align: left;
        font: normal normal normal 16px/20px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #484848;
        margin-top: 3%;
        margin-right: 5%;
        margin-left: 23%;
    }

    .modal-dialog .modal-content .modal-body .body-three{
        text-align: left;
        font: normal normal 600 16px/20px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
        margin-right: 5%;
    }
    .modal-dialog .modal-content .modal-body .body-four{
        text-align: left;
        font: normal normal normal 16px/20px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #484848;
        margin-top: 2%;
        margin-right: 5%;
        margin-left: 23%;
    }

    /**table*/
    .accent-fuchsia .page-item.active .page-link {
        background-color: #FFFFFF!important;
        border: none!important;
        color: black;!important;
    }
    .accent-fuchsia .page-item{
        margin: 0.2em;
    }
    .accent-fuchsia .page-item .page-link {
        background-color: #ECECEC!important;
        border: none!important;
        color: black;!important;
        border-radius: 100%;
        width: 100%;
    }
    .accent-fuchsia .page-item .page-link:hover {
        background-color: #E2E2E2!important;
        border: none!important;
        color: black;!important;
        border-radius: 100%;
        width: 100%;
    }
    table, tr, td{
        border:none!important;
    }
    table, thead, th{
        border: none!important;
    }


    /**Modal secciones*/
    .three-modal-title{
        text-align: left;
        font: normal normal 600 24px/20px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3F62A8!important;
        opacity: 1;
        margin-left:3%;
        margin-top: -0.8em;
    }
    .form-control-8{
        background: #FF6D5D 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 220px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 76.5%;
        margin-top: -1.9em
    }
    .form-control-2{
        background: #8B8B8B 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 120px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 82%;
        margin-top: -1.9em
    }
    .form-control-3{
        background: #36B980 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 120px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 82%;
        margin-top: -1.9em
    }
    .form-control-4{
        background: #1BA198 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 235px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 75.5%;
        margin-top: -1.9em
    }
    .form-control-5{
        background: #5D9EFF 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 160px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 80%;
        margin-top: -1.9em
    }
    .form-control-6{
        background: #FF5D5D 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 180px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 78%;
        margin-top: -1.9em
    }
    .form-control-7{
        background: #FFAE36 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 230px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 76%;
        margin-top: -1.9em
    }
    .form-control-1{
        background: #2D2D2D 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 190px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 78%;
        margin-top: -1.9em
    }
    .form-control-9{
        background: #F456FF 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 250px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 75%;
        margin-top: -1.9em
    }
    .form-control-10{
        background: #5D7DFF 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 140px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 81%;
        margin-top: -1.9em
    }
    .form-control-11{
        background: #685DFF 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 90px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 84%;
        margin-top: -1.9em
    }
    .modal-body{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        box-shadow: 0px 1px 5px #5B5B5B29;
        border-radius: 10px 10px 0px 0px;
        opacity: 1;
        padding-bottom: 2%;
    }
    .modal-text-section .section{
        border-right: 1px solid #D2D2D2;
        transition: all 0.5s;
        padding-right: 16px;
        word-break: break-all;
    }
    .modal-text-section .section .section-title{
        text-align: left;
        font: normal normal 600 22px/28px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #484848;
        opacity: 1;
        margin-top: 5%;
        margin-left: 10%;
        margin-bottom: 2%
    }
    .modal-text-section .vl{
        border: 1px solid #D2D2D2;
        height: 894px;
        position: absolute;
        left: 94%;
        margin-left: -3px;
        top: 0;
    }
    .modal-text-section .line{
        border: 1px solid #D2D2D2;
        height: 894px;
        position: absolute;
        left: 99%;
        margin-left: -3px;
        top: 0;
    }
    .modal-text-section .date{
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #4A4A4A;
        opacity: 1;
        margin-left: 4%;
        margin-top: 4%;
    }
    .modal-text-section .section-evaluate{
        background: #7896FB 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        width: 120px;
        height: 35px;
        padding-top: 5px;
        margin-left: 83%;
        margin-top: -3em;
        text-align: center;
    }
    .modal-text-section .section-evaluate:hover{
        background: #7896FB 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        width: 120px;
        height: 35px;
        padding-top: 5px;
        margin-left: 83%;
        margin-top: -3em;
        text-align: center;
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 1s; /* don't forget to set a duration! */
    }
    .modal-text-section .section-undo-evaluate{
        background: #FFB114 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        width: 180px;
        height: 35px;
        padding-top: 5px;
        margin-left: 78.5%;
        margin-top: -3em;
        text-align: center;
    }
    .modal-text-section .sections-evaluate{
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF!important;
        opacity: 1;
        text-decoration: none!important;
    }
    .modal-text-section .section-undo-evaluate:hover{
        background: #FFB114 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        width: 180px;
        height: 35px;
        padding-top: 5px;
        margin-left: 78.5%;
        margin-top: -3em;
        text-align: center;
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 1s; /* don't forget to set a duration! */
    }
    .modal-text-section .valign-middle-img{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        width: 120px;
        height: 35px;
        padding-top: 5px;
        margin-left: 85.5%;
        margin-top: -3em;
    }
    .modal-text-section .option_{
        margin-bottom: 0.6em;
        margin-top: 0.6em;
    }
    .modal-text-section .option_:hover{
        background: #f5f4f4;
    }
    .modal-text-section .option:hover{
        background: #F1F1F1 !important;
    }
    .modal-text-section .active-button{
        background: #F1F1F1;
    }
    .modal-text-section .dropdown-item:active {
        color: #fff;
        text-decoration: none;
        background-color: #F1F1F1;
    }

    /**Linea centro*/
    .center_line>div{
        border: 1px solid #D2D2D2;
        opacity: 1;
        margin-right: 4%;
        margin-left: 2%;
    }
    .center_line{
        margin: 25px;
    }
    .modal-text-section .title{
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #222E58;
        opacity: 1;
        cursor: pointer;
    }
    .modal-text-section .title:hover{
        color: #222E58;
        cursor: pointer;
    }

    /***/
    .dropdown-toggle .title{
        margin-left: 20%;
        background: #FFFFFF;
    }
    .footer{
        text-align: right;
        margin-left: 48em;
        margin-bottom: 1em;
    }
    .footer>button{
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        padding: 10px 20px 10px 20px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        text-shadow: 0px 3px 6px #FFFFFF29;
        border: 1px solid #4168B6FF;
        box-shadow: 0px 0px 6px transparent;
    }
    .footer>button:hover{
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        padding: 10px 20px 10px 20px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        text-shadow: 0px 3px 6px #FFFFFF29;
        border: 1px solid #4168B6FF;
        box-shadow: 0px 0px 6px rgba(108, 108, 108, 0.56);
    }
    .footer>button:focus{
        outline:none !important;
        outline-width: 0 !important;
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        border: 1px solid #3F62A8;
    }
    .archive-task-monitor{
        background: #F1F1F1  0% 0% no-repeat padding-box;
        box-shadow: 0px 0px 4px #00000029;
        border-radius: 5px;
        opacity: 1;
        margin-left: 20px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3E3E3E!important;
        text-shadow:  0px 3px 6px #FFFFFF29;
        border: none!important;
        padding: 5px 12px 5px 12px;
    }
    .comment-task-monitor{
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848!important;
    }
    .include-task-monitor{
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848!important;
        padding: 2em 2em 2em 2em;
        border-radius: 5px;
        background: #F1F1F1 0% 0% no-repeat padding-box;
        border: 1px solid #E9E9E9;
    }
    .include-task-monitor:hover{
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848!important;
        padding: 2em 2em 2em 2em;
        border-radius: 5px;
        background: #F1F1F1 0% 0% no-repeat padding-box;
        box-shadow: 0px 0px 4px rgba(108, 108, 108, 0.39);
        border: 1px solid #E9E9E9;
    }
    nav svg{
        height: 20px;
    }
    nav span{
        text-align: left;
        font: normal normal normal 20px/27px "Source Sans Pro";
        letter-spacing: 0px;
        color: #707070;
        opacity: 1;
    }


    /**Modal*/

    .not-confirm-on-state-change{
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        letter-spacing: 0px;
        color: #FFFFFF;
        text-shadow:  0px 3px 6px #FFFFFF29;
        width: 90px;
        height: 35px;
        border: 1px solid #4168B6FF;
        padding: 6px 10px 6px 10px;
        background: #4168b6 0% 0% no-repeat padding-box;
        font: normal normal normal 18px/23px "Source Sans Pro";
        box-shadow: 0px 0px 6px transparent;
    }
    .not-confirm-on-state-change:focus{
        outline:none !important;
        outline-width: 0 !important;
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        border: 1px solid #3F62A8;
    }

    .not-confirm-on-state-change:hover{
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        letter-spacing: 0px;
        color: #FFFFFF;
        text-shadow:  0px 3px 6px #FFFFFF29;
        width: 90px;
        height: 35px;
        border: 1px solid #4168B6FF;
        padding: 6px 10px 6px 10px;
        background: #4168b6 0% 0% no-repeat padding-box;
        font: normal normal normal 18px/23px "Source Sans Pro";
        box-shadow: 0px 0px 6px rgba(108, 108, 108, 0.56);
    }
    .confirm-on-state-change {
        font: normal normal 600 18px/23px 'Source Sans Pro';
        color: #3F62A8;
        text-shadow:  0px 3px 6px #FFFFFF29;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #3F62A8;
        border-radius: 5px;
        opacity: 1;
        width: 90px;
        height: 35px;
        margin-top: 20px;
        text-align: center;
        padding: 6px 10px 6px 10px;
    }
    .confirm-on-state-change:hover {
        text-shadow:  0px 3px 6px #FFFFFF29;
        border-radius: 5px;
        opacity: 1;
        width: 90px;
        height: 35px;
        margin-top: 20px;
        text-align: center;
        font: normal normal 600 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3F62A8;
        background: #ffffff 0% 0% no-repeat padding-box;
        border: 1px solid #3F62A8;
        padding: 6px 10px 6px 10px;
        box-shadow: 0px 0px 5px rgba(108, 108, 108, 0.39);
    }
    /** Modal de rechazo  **/
    #undoModal .process{
        font: normal normal 600 18px/23px 'Source Sans Pro';
        color: #3F62A8!important;
        text-shadow:  0px 3px 6px #3F62A8!important;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #3F62A8!important;
        border-radius: 5px;
        opacity: 1;
        margin-top: 20px;
        text-align: center;
        padding: 5px 2em 5px 2em;
    }
    /** Calificación**/

    #task_monitor_confirmModal .process{
        font: normal normal 600 18px/23px 'Source Sans Pro';
        color: #3F62A8;
        text-shadow:  0px 3px 6px #3F62A8;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #3F62A8;
        border-radius: 5px;
        opacity: 1;
        margin-top: 15px;
        text-align: center;
        padding: 5px 2em 5px 2em;
    }
    /**
      CUSTOM PAGINATOR
     */
    /**Paginación*/

    .page-item{
        background: #ECECEC!important;
    }
    .page-link{
        text-align: center;
        font: normal normal normal 20px/25px "Source Sans Pro";
        letter-spacing: 0px;
        color: #414141!important;
        opacity: 1;
        margin: 0.5em;
        border-radius: 100%!important;
    }

    .current-page{
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 20px!important;
        opacity: 1;
        color: #FFFFFF;
        padding: 1px 8px 1px 8px;
    }
    .custom_paginator .pagination li.page-item.disabled>span{
        background: #E2E2E2!important;
        color: #414141 !important;
    }
    .custom_paginator .pagination li.page-item.active>span,
    .custom_paginator .pagination li.page-item.active>span{
        text-align: center;
        color: #FFFFFF!important;
        border-radius: 100%!important;
        width: 100%;
        background: #3F62A8!important;
    }

    .custom_paginator .pagination li:first-child>button,
    .custom_paginator .pagination li:first-child>span,
    .custom_paginator .pagination li:last-child>button,
    .custom_paginator .pagination li:last-child>span{
        text-align: center;
        color: #fff0f0!important;
        border-radius: 100%!important;
        max-width: 100%;
        background: #3F62A8!important;
        /*width: 2em!important;*/
    }

    .custom_paginator .pagination li:first-child>button:hover,
    .custom_paginator .pagination li:last-child>button:hover{
        text-align: center;
        color: #FFFFFF!important;
        max-width: 100%;
        border-radius: 100%!important;
        background: #3F62A8!important;
    }

    /**Modal de secciones**/
    .modal-header-section .reloj{
        width: 120px;
        height: 35px;
        border: 1px solid #B8B8B8!important;
        background: #FFFFFF!important;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #757575;
        margin-left: 90.5%;
        margin-top: -2.3em
    }

    .modal-header-section .type-state{
        text-align: center;
        color: #FFFFFF;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        padding-top: 5px
    }
    .modal-header-section .close{
        margin-top: -2.3em;
        margin-right: -1.5%;
    }


    /**Modal Cerrar*/

    /**Linea centro*/
    .modal-close .modal-close .close-line>div{
        border: 1px solid #D2D2D2;
        opacity: 1;
        margin-right: 10%;
        margin-left: 10%;
    }
    .modal-close .modal-close .close-line{
        margin: 25px;
    }

    /**Modal uno*/
    .option_confirm:hover{
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 1s; /* don't forget to set a duration! */
    }
    .form-control:focus{
        outline:none !important;
        outline-width: 0 !important;
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        border: 1px solid #C4C4C4!important;
    }

    /**table customer*/

    .header-task-monitor .state-title{
        width: 8%;
        vertical-align: middle;
    }
    .header-task-monitor .state-title .state-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor .customer{
        vertical-align: middle;
    }
    .header-task-monitor .customer .customer-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
        padding-left: 1.8em;
}
    .header-task-monitor .start-date{
        vertical-align: middle;
    }
    .header-task-monitor .start-date .start-date-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor .end-date{
        vertical-align: middle
    }
    .header-task-monitor .end-date .end-date-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor .cycle{
        vertical-align: middle
    }
    .header-task-monitor .cycle .task-cycle-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor .priority-title{
        vertical-align: middle;
    }

    .header-task-monitor .priority-title .priority-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor .approval-title{
        vertical-align: middle;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
        margin-bottom: 1.5em!important;
        margin-top: 0.5em!important;
        padding: 0px;
    }

    .hover-table{
        background-color: white !important;
    }
    .hover-table:hover{
        background-color: #f4f6f9 !important;
    }

    .edge-of-state{
        background: white;
        position: relative;
        border-radius: 8px;
    }
    .edge-of-state .customer-state-of-edge{
        position: absolute;
        left:-1.7em;
        margin-top: 6.5%;
        background:white;
        width: 5px;
        height: 45px;
        border-radius: 0 3px 3px 0;
    }
    .name-state{
        text-align: left;
        font: normal normal normal 18px/22px 'Source Sans Pro';
        color: #FFFFFF;
        width: 175px;
        height: 70px;
        display: flex;
        align-items: center;
    }
    .table td, .table th {
        padding: 0.75rem;
        vertical-align: middle!important;
        border-top: 1px solid #dee2e6;
    }
    .showTask .name{
        text-align: left;
        font: normal normal normal 15px/19px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #777777;
        opacity: 1;
    }
    .showTask .img-state{
        text-align: left;
        font: normal normal normal 20px/25px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #414141;
        opacity: 1;
    }
    .start-date{
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        color: #414141;
    }
    .date-end{
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        color: #414141;
    }
}
@media (min-width: 2000px) and (max-width: 2500px){
    /**Menú*/
    .navbar {
        background: #FFFFFF 0% 0% no-repeat padding-box!important;
        box-shadow: 0px 3px 5px #8E8E8E29;
        opacity: 1;
        height: 103px;
    }
    .navbar .navbar-brand .savmanagemnet-logo{
        max-width: 290px;
        max-height: 33px;
    }
    .navbar .img-customer{
        text-align: right;
        margin-right: -15%;
    }
    .navbar .img-customer .logo-customer{
        max-width: 110px;
        max-height: 53px;
    }
    .d-flex{
        width: 20%;
        text-align: right;
        margin-right: -13%;
    }
    .d-flex .close-section{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #646464;
        opacity: 1;
        border-radius: 10px;
        padding: 6px 13px 6px 13px;
        text-decoration: none!important;
        margin-top: 6px;
        text-align: center;
        font: normal normal 600 18px/23px 'Source Sans Pro';
        color: #4E4E4E;
    }
    .d-flex .close-section:hover{
        background: #E8E8E8 0% 0% no-repeat padding-box;
        border: 1px solid #646464;
        opacity: 1;
        border-radius: 10px;
        padding: 6px 13px 6px 13px;
        text-decoration: none!important;
        margin-top: 6px;
        text-align: center;
        font: normal normal 600 18px/23px 'Source Sans Pro';
        color: #4E4E4E;
    }
    .navbar .vl{
        border-left: 1px solid #CCCCCC;
        height: 40px;
        position: absolute;
        left: 91%;
        top: 35%;
    }

    /**Buscar*/

    .task-monitor-search{
        margin-top: 30px;
    }
    .task-monitor-search .form-control{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #C4C4C4!important;
        border-radius: 5px!important;
        color: #AAAAAA!important;
        opacity: 1;
        margin-left: 2%;
        margin-right: 2%;
        padding: 1.3em 2em 1.3em 2em;
    }
    .task-monitor-search>input:focus {
        outline:none !important;
        outline-width: 0 !important;
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        border: 1px solid #C4C4C4;
    }

    /**Resultados y actualizar*/
    .help-block{
        text-align: left;
        font: normal normal normal 20px/27px "Source Sans Pro";
        letter-spacing: 0px;
        color: #707070!important;
        opacity: 1;
        margin-left: 2.5%;
    }
    .number{
        margin-top: -1.7em;
        text-align: center;
        color: #FFFFFF;
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0;
        padding: 2px 6px 2px 6px;
    }
    #button_filter{
        background: #3F62A8 0% 0% no-repeat padding-box!important;
        border-radius: 5px;
        padding: 6px 15px 6px 15px!important;
        text-decoration: none!important;
        border: none!important;
        text-align: center;
        font: normal normal normal 18px/24px 'Source Sans Pro'!important;
        color: #FFFFFF!important;
        margin-right: 1em;
        margin-top: 0.5em;
        margin-bottom: 0.5em;
    }
    #button_filter:hover{
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 3s; /* don't forget to set a duration! */
    }
    #filter-panel{
        height: auto;
        position: absolute;
        width: 99.25%;
        z-index: 99;
        margin-top: -25px;
        margin-left: 1%;
        padding-right: 2.7em;
        padding-top: 25px;
    }
    .filter-panel-body{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        box-shadow: 0px 4px 6px #51515129;
        border-radius: 5px;
    }
    .filter-panel-body:before{
        content: "";
        position: absolute;
        top: -11.5px;
        right: 11.5em;
        width: 0;
        height: 0;
        border-width: 0 35px 35px;
        border-style: solid;
        border-color: transparent transparent #FFFFFF;
    }
    .filter-panel-body .dropdown-menu{
        border: transparent!important;
        background: #FFFFFF 0% 0% no-repeat padding-box!important;
        box-shadow: 0px 4px 6px #51515129!important;
    }
    #states-block{
        padding-right: 25em
    }
    .filter-panel-body .states-title{
        margin-left: 4.5em;
        padding-top: 2em;
    }
    .filter-panel-body .states-title>h1{
        text-align: left;
        font: normal normal 600 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
    }
    .filter-panel-body .filter-states{
        margin-top: 1.3em;
    }
    .filter-panel-body .filter-states .state_checkbox{
        margin-left: 4.5em;
    }

    .filter-panel-body>hr {
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
        border: 0;
        border-top: 1px solid #f3f2f2 !important;
        width: 95%;
    }

    .filter-panel-body .date_title{
        margin-left: 4.5em;
        margin-bottom: 1em;
    }
    .filter-panel-body .date_title>h1{
        text-align: left;
        font: normal normal 600 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
    }
    .filter-panel-body .separator{
        text-align: left;
        font: normal normal normal 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
        margin-top: 0.3em;
        margin-left: -12em;
    }
    .filter-panel-body .start_date{
        text-align: left;
        font: normal normal normal 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
        border: 2px solid #D2D2D2;
        border-radius: 5px;
        width: 188px;
        height: 46px;
        margin-left: 3.1em;
    }

    .filter-panel-body .icon-start-at{
        margin-top: -2.9em;
        margin-left: 12.8em;
        border: none!important;
        background: none!important;
    }
    .filter-panel-body .end_date{
        text-align: left;
        font: normal normal normal 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
        border: 2px solid #D2D2D2;
        border-radius: 5px;
        width: 188px;
        height: 46px;
        margin-left: 0.3em;
    }
    .filter-panel-body .icon-end-at{
        margin-top: -2.9em;
        margin-left: 9.4em;
        border: none!important;
        background: none!important;
    }
    .filter-panel-body .priority-title{
        margin-bottom: 1em;
    }
    .filter-panel-body .priority-title>h1{
        text-align: left;
        font: normal normal 600 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
    }

    .filter-panel-body .clean-filters{
        margin-left: 4.8em;
        padding-top: 0.9em;
    }
    .filter-panel-body .clean-filters .title{
        text-align: left;
        font: normal 600 normal 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #FF3434;
        cursor: pointer;
    }
    .filter-panel-body .clean-filters .title:hover{
        color:  #FF3434!important;
    }
    .filter-panel-body .filter-button{
        text-align: right;
        margin-left: -4.5em;
        margin-bottom: 2em;
        margin-top: 0.3rem;
    }
    .filter-panel-body .filter-button .close-filter{
        text-align: center;
        font: normal normal normal 18px/24px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #3F62A8;
        border: 2px solid #3F62A8;
        border-radius: 5px;
        padding: 8px 10px 8px 10px;
    }
    .filter-panel-body .filter-button .close-filter:hover{
        text-align: center;
        font: normal normal normal 18px/24px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #3F62A8;
        opacity: 1;
        background: #ffffff 0% 0% no-repeat padding-box;
        border: 2px solid #3F62A8;
        border-radius: 5px;
        padding: 8px 10px 8px 10px;
        box-shadow: 0px 0px 5px rgba(108, 108, 108, 0.39);
    }

    .filter-panel-body .filter-button .apply-filter{
        text-align: center;
        font: normal normal normal 18px/24px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #FFFFFF;
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 5px;
        padding: 9px 15px 9px 15px;
        margin-left: 1em;
    }
    .filter-panel-body .filter-button .apply-filter:hover{
        text-align: center;
        letter-spacing: 0px;
        border-radius: 5px;
        padding: 9px 15px 9px 15px;
        background: #3F62A8 0% 0% no-repeat padding-box;
        font: normal normal normal 18px/24px 'Source Sans Pro';
        color: #FFFFFF;
        box-shadow: 0px 0px 6px rgba(108, 108, 108, 0.56);
    }
    .update>a{
        text-align: left;
        font: normal normal 600 16px/21px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #575757!important;
        opacity: 1;
        margin-right: 0.8em;
    }
    .update>button{
        background: transparent 0% 0% no-repeat padding-box;
        opacity: 1;
        border-radius: 5px;
        padding: 8px 15px 8px 15px;
        text-decoration: none!important;
        margin-top: 6px;
        text-align: center;
        font: normal normal 600 16px/21px 'Source Sans Pro';
        color: #4E4E4E;
    }

    .update>a{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        opacity: 1;
        border-radius: 5px;
        padding: 8px 15px 8px 15px;
        text-decoration: none!important;
        margin-top: 6px;
        text-align: center;
        font: normal normal 600 16px/21px 'Source Sans Pro';
        color: #4E4E4E;
    }
    .update>a:hover{
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 3s; /* don't forget to set a duration! */
    }
    /**body table*/
    .header-task-monitor{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        opacity: 1;
    }
    .header-task-monitor .text-center{
        padding: 20px 0px!important;
    }
    .header-task-monitor .customer{
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
        padding: 0px 0px 0px 20px;
    }
    .priority-class-customer-1{
        background: #6594FF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        margin-left: 30%;
        margin-right: 30%;
        padding-top: 2%;
        padding-bottom: 3%;
        text-align: center;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
    }
    .priority-class-customer-2{
        background: #1A3D8F 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        margin-left: 37%;
        margin-right: 37%;
        padding-top: 2%;
        padding-bottom: 3%;
    }
    .priority-class-customer-3{
        background: #757575 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        margin-left: 32%;
        margin-right: 32%;
        padding-top: 2%;
        padding-bottom: 3%;
    }
    .priority-class-customer-4{
        background: #FF6665 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        margin-left: 37%;
        margin-right: 37%;
        padding-top: 2%;
        padding-bottom: 3%;
    }
    .priority-class-customer-5{
        background: #FF3434 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        margin-left: 30%;
        margin-right: 30%;
        padding-top: 2%;
        padding-bottom: 3%;
    }

    .state-class-custom-8{
        background: #FF6D5D 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-2{
        background: #8B8B8B 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-3{
        background: #36B980 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-4{
        background: #1BA198 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-5{
        background: #5D9EFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-6{
        background: #FF5D5D 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-7{
        background: #FFAE36 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-1{
        background: #2D2D2D 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-9{
        background: #F456FF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-10{
        background: #5D7DFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-11{
        background: #685DFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }

    .days-task{
        text-align: center;
        font: normal normal normal 14px/18px Source Sans Pro;
        letter-spacing: 0px;
        color: #FFFFFF;
        opacity: 1;
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 5px;
        margin-left: 28%;
        margin-right: 28%;
        padding-top: 3%;
        padding-bottom: 4%;
    }
    .undo-evaluate {
        text-decoration: none !important;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF !important;
    }
    .undo-button-evaluate {
        background: #FFB114 0% 0% no-repeat padding-box;
        box-shadow: 0px 2px 4px #00000029;
        border-radius: 5px;
        opacity: 1;
        cursor: pointer;
        padding-left: 50px;
    }
    .undo-button-evaluate:hover{
        background: #FFB114 0% 0% no-repeat padding-box;
        box-shadow: 0px 2px 4px #00000029;
        border-radius: 5px;
        opacity: 1;
        cursor: pointer;
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 1s; /* don't forget to set a duration! */
    }
    .evaluate{
        text-decoration: none!important;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF!important;
        opacity: 1;
        padding-left: 18px;
    }
    .button-evaluate{
        background: #7896FB 0% 0% no-repeat padding-box;
        box-shadow: 0px 2px 4px #00000029;
        border-radius: 5px;
        opacity: 1;
    }
    .button-evaluate:hover{
        background: #7896FB 0% 0% no-repeat padding-box;
        box-shadow: 0px 2px 4px #00000029;
        border-radius: 5px;
        opacity: 1;
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 1s; /* don't forget to set a duration! */
    }
    .img-evaluate{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    /**Modal dialog*/
    .modal-dialog .modal-content .modal-body .modal-card{
        box-shadow: 0px 0px 6px #00000029;
        border-radius: 5px;
        opacity: 1;
        width: 320px;
        height: 334px;
        margin-left: 12%;
        margin-top: 3%;
        margin-bottom: 3%;
    }
    .modal-dialog .modal-content .modal-body .two-modal-card{
        box-shadow: 0px 0px 6px #00000029;
        border-radius: 5px;
        opacity: 1;
        width: 320px;
        height: 334px;
        margin-left: 2%;
        margin-top: 3%;
        margin-bottom: 3%;
    }
    .modal-dialog .modal-content .modal-body .modal-card .text-modal-monitor{
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
        padding-left: 7%;
        padding-right: 7%;
    }
    .modal-dialog .modal-content .modal-body .two-modal-card .text-modal-monitor{
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
        padding-left: 7%;
        padding-right: 7%;
    }
    .modal-dialog .modal-content .modal-body .modal-card .text-modal-monitor .bold-text{
        text-align: center;
        font: normal normal 600 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
    }
    .modal-dialog .modal-content .modal-body .two-modal-card .text-modal-monitor .bold-text{
        text-align: center;
        font: normal normal 600 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
    }
    .modal-dialog .modal-content .modal-header .modal-title{
        text-align: left;
        font: normal normal 600 24px/20px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3F62A8;
        opacity: 1;
        margin-top: 0.2em;
        margin-left: -19em;
    }
    .modal-dialog .modal-content .modal-header{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        box-shadow: 0px 1px 5px #5B5B5B29;
        border-radius: 10px 10px 0px 0px;
        opacity: 1;
    }
    .modal-dialog .modal-content .modal-body>p{
        text-align: left;
        font: normal normal normal 20px/25px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
        opacity: 1;
        padding-left: 6%;
        padding-right: 8%;
        margin-top: 1%;
    }
    .modal-dialog .modal-content .modal-footer .cancel-modal-approval{
        text-align: center;
        font: normal normal 600 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3F62A8;
        text-shadow:  0px 3px 6px #FFFFFF29;
        opacity: 1;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #3F62A8;
        border-radius: 5px;
        padding: 6px 10px 6px 10px;
    }
    .modal-dialog .modal-content .modal-footer .cancel-modal-approval:hover{
        text-align: center;
        font: normal normal 600 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3F62A8;
        opacity: 1;
        background: #ffffff 0% 0% no-repeat padding-box;
        border: 1px solid #3F62A8;
        border-radius: 5px;
        padding: 6px 10px 6px 10px;
        box-shadow: 0px 0px 5px rgba(108, 108, 108, 0.39);
    }
    .modal-dialog .modal-content .modal-footer .confirm-modal-approval{
        text-align: center;
        letter-spacing: 0px;
        opacity: 1;
        border: 1px solid #3F62A8;
        border-radius: 5px;
        padding: 6px 10px 6px 10px;
        background: #3F62A8 0% 0% no-repeat padding-box;
        font: normal normal normal 18px/23px "Source Sans Pro";
        color: #FFFFFF;
        text-shadow:  0px 3px 6px #FFFFFF29;
    }
    .modal-dialog .modal-content .modal-footer .confirm-modal-approval:hover{
        text-align: center;
        letter-spacing: 0px;
        opacity: 1;
        border: 1px solid #4168B6FF;
        border-radius: 5px;
        padding: 6px 10px 6px 10px;
        background: #4168b6 0% 0% no-repeat padding-box;
        font: normal normal normal 18px/23px "Source Sans Pro";
        color: #FFFFFF;
        box-shadow: 0px 0px 6px rgba(108, 108, 108, 0.56);
    }
    .modal-dialog .modal-content{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border-radius: 10px;
        opacity: 1;
    }

    .active{
        background: #f4f6f9!important;

    }

    .modal-dialog .modal-content .modal-body .title-one{
        text-align: left;
        font: normal normal normal 20px/25px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
        margin-top: 5%;
        margin-left: 23%;
    }
    .modal-dialog .modal-content .modal-body .title-two{
        text-align: left;
        font: italic normal 600 20px/25px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #484848;
        margin-left: 23%;
    }
    .modal-dialog .modal-content .modal-body .body-one{
        margin-top: 4%;
        background: #E8EDFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        text-align: left;
        font: normal normal bold 16px/20px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #212E58;
        opacity: 1;
        margin-right: 19.5em;
        padding-left: 2%;
        margin-left: 23%;
    }
    .modal-dialog .modal-content .modal-body .body-two{
        text-align: left;
        font: normal normal normal 16px/20px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #484848;
        margin-top: 3%;
        margin-right: 5%;
        margin-left: 23%;
    }

    .modal-dialog .modal-content .modal-body .body-three{
        text-align: left;
        font: normal normal 600 16px/20px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
        margin-right: 5%;
    }
    .modal-dialog .modal-content .modal-body .body-four{
        text-align: left;
        font: normal normal normal 16px/20px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #484848;
        margin-top: 2%;
        margin-right: 5%;
        margin-left: 23%;
    }

    /**table*/
    .accent-fuchsia .page-item.active .page-link {
        background-color: #FFFFFF!important;
        border: none!important;
        color: black;!important;
    }
    .accent-fuchsia .page-item{
        margin: 0.2em;
    }
    .accent-fuchsia .page-item .page-link {
        background-color: #ECECEC!important;
        border: none!important;
        color: black;!important;
        border-radius: 100%;
        width: 100%;
    }
    .accent-fuchsia .page-item .page-link:hover {
        background-color: #E2E2E2!important;
        border: none!important;
        color: black;!important;
        border-radius: 100%;
        width: 100%;
    }
    table, tr, td{
        border:none!important;
    }
    table, thead, th{
        border: none!important;
    }


    /**Modal secciones*/
    .three-modal-title{
        text-align: left;
        font: normal normal 600 24px/20px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3F62A8!important;
        opacity: 1;
        margin-left:3%;
        margin-top: -0.8em;
    }
    .form-control-8{
        background: #FF6D5D 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 220px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 82%;
        margin-top: -1.9em
    }
    .form-control-2{
        background: #8B8B8B 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 120px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 86.5%;
        margin-top: -1.9em
    }
    .form-control-3{
        background: #36B980 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 120px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 86.5%;
        margin-top: -1.9em
    }
    .form-control-4{
        background: #1BA198 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 235px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 81.5%;
        margin-top: -1.9em
    }
    .form-control-5{
        background: #5D9EFF 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 160px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 85%;
        margin-top: -1.9em
    }
    .form-control-6{
        background: #FF5D5D 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 180px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 84%;
        margin-top: -1.9em
    }
    .form-control-7{
        background: #FFAE36 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 230px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 81.5%;
        margin-top: -1.9em
    }
    .form-control-1{
        background: #2D2D2D 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 190px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 83.5%;
        margin-top: -1.9em
    }
    .form-control-9{
        background: #F456FF 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 250px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 81%;
        margin-top: -1.9em
    }
    .form-control-10{
        background: #5D7DFF 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 140px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 85.5%;
        margin-top: -1.9em
    }
    .form-control-11{
        background: #685DFF 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 90px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 88%;
        margin-top: -1.9em
    }
    .modal-body{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        box-shadow: 0px 1px 5px #5B5B5B29;
        border-radius: 10px 10px 0px 0px;
        opacity: 1;
        padding-bottom: 2%;
    }
    .modal-text-section .section{
        border-right: 1px solid #D2D2D2;
        transition: all 0.5s;
        padding-right: 16px;
        word-break: break-all;
    }
    .modal-text-section .section .section-title{
        text-align: left;
        font: normal normal 600 22px/28px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #484848;
        opacity: 1;
        margin-top: 5%;
        margin-left: 10%;
        margin-bottom: 2%
    }
    .modal-text-section .vl{
        border: 1px solid #D2D2D2;
        height: 894px;
        position: absolute;
        left: 94%;
        margin-left: -3px;
        top: 0;
    }
    .modal-text-section .line{
        border: 1px solid #D2D2D2;
        height: 894px;
        position: absolute;
        left: 99%;
        margin-left: -3px;
        top: 0;
    }
    .modal-text-section .date{
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #4A4A4A;
        opacity: 1;
        margin-left: 4%;
        margin-top: 4%;
    }
    .modal-text-section .section-evaluate{
        background: #7896FB 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        width: 120px;
        height: 35px;
        padding-top: 5px;
        margin-left: 87%;
        margin-top: -3em;
        text-align: center;
        text-decoration: none!important;
    }
    .modal-text-section .section-evaluate:hover{
        background: #7896FB 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        width: 120px;
        height: 35px;
        padding-top: 5px;
        margin-left: 87%;
        margin-top: -3em;
        text-align: center;
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 1s; /* don't forget to set a duration! */
    }
    .modal-text-section .section-undo-evaluate{
        background: #FFB114 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        width: 180px;
        height: 35px;
        padding-top: 5px;
        margin-left: 83.7%;
        margin-top: -3em;
        text-align: center;
    }
    .modal-text-section .sections-evaluate{
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF!important;
        opacity: 1;
        text-decoration: none!important;
    }
    .modal-text-section .section-undo-evaluate:hover{
        background: #FFB114 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        width: 180px;
        height: 35px;
        padding-top: 5px;
        margin-left: 83.7%;
        margin-top: -3em;
        text-align: center;
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 1s; /* don't forget to set a duration! */
    }
    .modal-text-section .valign-middle-img{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        width: 120px;
        height: 35px;
        padding-top: 5px;
        margin-left: 89%;
        margin-top: -3em;
    }
    .modal-text-section .option_{
        margin-bottom: 0.6em;
        margin-top: 0.6em;
    }
    .modal-text-section .option_:hover{
        background: #f5f4f4;
    }
    .modal-text-section .active-button{
        background: #F1F1F1;
    }
    .modal-text-section .dropdown-item:active {
        color: #fff;
        text-decoration: none;
        background-color: #F1F1F1;
    }

    /**Linea centro*/
    .center_line>div{
        border: 1px solid #D2D2D2;
        opacity: 1;
        margin-right: 4%;
        margin-left: 2%;
    }
    .center_line{
        margin: 25px;
    }
    .modal-text-section .title{
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #222E58;
        opacity: 1;
        cursor: pointer;
    }
    .modal-text-section .title:hover{
        color: #222E58;
        cursor: pointer;
    }

    /***/
    .dropdown-toggle .title{
        margin-left: 20%;
        background: #FFFFFF;
    }
    .footer{
        text-align: right;
        margin-left: 48em;
        margin-bottom: 1em;
    }
    .footer>button{
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        padding: 10px 20px 10px 20px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        text-shadow: 0px 3px 6px #FFFFFF29;
        border: 1px solid #4168B6FF;
        box-shadow: 0px 0px 6px transparent;
    }
    .footer>button:hover{
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        padding: 10px 20px 10px 20px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        text-shadow: 0px 3px 6px #FFFFFF29;
        border: 1px solid #4168B6FF;
        box-shadow: 0px 0px 6px rgba(108, 108, 108, 0.56);
    }
    .footer>button:focus{
        outline:none !important;
        outline-width: 0 !important;
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        border: 1px solid #3F62A8;
    }
    .archive-task-monitor{
        background: #F1F1F1  0% 0% no-repeat padding-box;
        box-shadow: 0px 0px 4px #00000029;
        border-radius: 5px;
        opacity: 1;
        margin-left: 20px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3E3E3E!important;
        text-shadow:  0px 3px 6px #FFFFFF29;
        border: none!important;
        padding: 5px 12px 5px 12px;
    }
    .comment-task-monitor{
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848!important;
    }
    .include-task-monitor{
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848!important;
        padding: 2em 2em 2em 2em;
        border-radius: 5px;
        background: #F1F1F1 0% 0% no-repeat padding-box;
        border: 1px solid #E9E9E9;
    }
    .include-task-monitor:hover{
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848!important;
        padding: 2em 2em 2em 2em;
        border-radius: 5px;
        background: #F1F1F1 0% 0% no-repeat padding-box;
        box-shadow: 0px 0px 4px rgba(108, 108, 108, 0.39);
        border: 1px solid #E9E9E9;
    }
    nav svg{
        height: 20px;
    }
    nav span{
        text-align: left;
        font: normal normal normal 20px/27px "Source Sans Pro";
        letter-spacing: 0px;
        color: #707070;
        opacity: 1;
    }


    /**Modal*/

    .not-confirm-on-state-change{
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        letter-spacing: 0px;
        color: #FFFFFF;
        text-shadow:  0px 3px 6px #FFFFFF29;
        width: 90px;
        height: 35px;
        border: 1px solid #4168B6FF;
        padding: 6px 10px 6px 10px;
        background: #4168b6 0% 0% no-repeat padding-box;
        font: normal normal normal 18px/23px "Source Sans Pro";
        box-shadow: 0px 0px 6px transparent;
    }
    .not-confirm-on-state-change:hover{
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        letter-spacing: 0px;
        color: #FFFFFF;
        text-shadow:  0px 3px 6px #FFFFFF29;
        width: 90px;
        height: 35px;
        border: 1px solid #4168B6FF;
        padding: 6px 10px 6px 10px;
        background: #4168b6 0% 0% no-repeat padding-box;
        font: normal normal normal 18px/23px "Source Sans Pro";
        box-shadow: 0px 0px 6px rgba(108, 108, 108, 0.56);
    }
    .not-confirm-on-state-change:focus{
        outline:none !important;
        outline-width: 0 !important;
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        border: 1px solid #3F62A8;
    }
    .confirm-on-state-change {
        font: normal normal 600 18px/23px 'Source Sans Pro';
        color: #3F62A8;
        text-shadow:  0px 3px 6px #FFFFFF29;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #3F62A8;
        border-radius: 5px;
        opacity: 1;
        width: 90px;
        height: 35px;
        margin-top: 20px;
        text-align: center;
        padding: 6px 10px 6px 10px;
    }
    .confirm-on-state-change:hover {
        text-shadow:  0px 3px 6px #FFFFFF29;
        border-radius: 5px;
        opacity: 1;
        width: 90px;
        height: 35px;
        margin-top: 20px;
        text-align: center;
        font: normal normal 600 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3F62A8;
        background: #ffffff 0% 0% no-repeat padding-box;
        border: 1px solid #3F62A8;
        padding: 6px 10px 6px 10px;
        box-shadow: 0px 0px 5px rgba(108, 108, 108, 0.39);
    }
    /** Modal de rechazo  **/
    #undoModal .process{
        font: normal normal 600 18px/23px 'Source Sans Pro';
        color: #474747;
        text-shadow:  0px 3px 6px #FFFFFF29;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #464646;
        border-radius: 5px;
        opacity: 1;
        margin-top: 30px;
        text-align: center;
        padding: 5px 2em 5px 2em;
    }
    /** Calificación**/

    #task_monitor_confirmModal .process{
        font: normal normal 600 18px/23px 'Source Sans Pro';
        color: #3F62A8;
        text-shadow:  0px 3px 6px #3F62A8;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #3F62A8;
        border-radius: 5px;
        opacity: 1;
        margin-top: 40px;
        text-align: center;
        padding: 5px 2em 5px 2em;
    }
    /**
      CUSTOM PAGINATOR
     */
    /**Paginación*/

    .page-item{
        background: #ECECEC!important;
    }
    .page-link{
        text-align: center;
        font: normal normal normal 20px/25px "Source Sans Pro";
        letter-spacing: 0px;
        color: #414141!important;
        opacity: 1;
        margin: 0.5em;
        border-radius: 100%!important;
    }

    .current-page{
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 20px!important;
        opacity: 1;
        color: #FFFFFF;
        padding: 1px 8px 1px 8px;
    }
    .custom_paginator .pagination li.page-item.disabled>span{
        background: #E2E2E2!important;
        color: #414141 !important;
    }
    .custom_paginator .pagination li.page-item.active>span,
    .custom_paginator .pagination li.page-item.active>span{
        text-align: center;
        color: #FFFFFF!important;
        border-radius: 100%!important;
        width: 100%;
        background: #3F62A8!important;
    }

    .custom_paginator .pagination li:first-child>button,
    .custom_paginator .pagination li:first-child>span,
    .custom_paginator .pagination li:last-child>button,
    .custom_paginator .pagination li:last-child>span{
        text-align: center;
        color: #fff0f0!important;
        border-radius: 100%!important;
        max-width: 100%;
        background: #3F62A8!important;
        /*width: 2em!important;*/
    }

    .custom_paginator .pagination li:first-child>button:hover,
    .custom_paginator .pagination li:last-child>button:hover{
        text-align: center;
        color: #FFFFFF!important;
        max-width: 100%;
        border-radius: 100%!important;
        background: #3F62A8!important;
    }

    /**Modal de secciones**/
    .modal-header-section .reloj{
        width: 120px;
        height: 35px;
        border: 1px solid #B8B8B8!important;
        background: #FFFFFF!important;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #757575;
        margin-left: 92.5%;
        margin-top: -2.3em
    }

    .modal-header-section .type-state{
        text-align: center;
        color: #FFFFFF;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        padding-top: 5px
    }
    .modal-header-section .close{
        margin-top: -2.3em;
        margin-right: -0.7%;
    }


    /**Modal Cerrar*/

    /**Linea centro*/
    .modal-close .modal-close .close-line>div{
        border: 1px solid #D2D2D2;
        opacity: 1;
        margin-right: 10%;
        margin-left: 10%;
    }
    .modal-close .modal-close .close-line{
        margin: 25px;
    }

    /**Modal uno*/
    .option_confirm:hover{
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 1s; /* don't forget to set a duration! */
    }
    .form-control:focus{
        outline:none !important;
        outline-width: 0 !important;
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        border: 1px solid #C4C4C4!important;
    }

    /**table customer*/

    .header-task-monitor .state-title{
        width: 5%;
        vertical-align: middle;
    }
    .header-task-monitor .state-title .state-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor .customer{
        vertical-align: middle;
    }
    .header-task-monitor .customer .customer-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor .start-date{
        vertical-align: middle;
    }
    .header-task-monitor .start-date .start-date-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor .end-date{
        vertical-align: middle
    }
    .header-task-monitor .end-date .end-date-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor .cycle{
        vertical-align: middle
    }
    .header-task-monitor .cycle .task-cycle-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor .priority-title{
        vertical-align: middle
    }

    .header-task-monitor .priority-title .priority-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor .approval-title{
        vertical-align: middle;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }

    .hover-table{
        background-color: white !important;
    }
    .hover-table:hover{
        background-color: #f4f6f9 !important;
    }

    .edge-of-state{
        background: white;
        position: relative;
        border-radius: 8px;
    }
    .edge-of-state .customer-state-of-edge{
        position: absolute;
        left:-1.7em;
        top: 10px;
        background:white;
        width: 5px;
        height: 58px;
        border-radius: 0 3px 3px 0;
    }
    .name-state{
        text-align: left;
        font: normal normal normal 18px/22px 'Source Sans Pro';
        color: #FFFFFF;
        width: 171px;
        padding-bottom: 25px;
        padding-top: 25px;
        vertical-align: middle!important;
    }
    .table td, .table th {
        padding: 0.75rem;
        vertical-align: middle!important;
        border-top: 1px solid #dee2e6;
    }
    .showTask .name{
        text-align: left;
        font: normal normal normal 15px/19px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #777777;
        opacity: 1;
    }
    .showTask .img-state{
        text-align: left;
        font: normal normal normal 20px/25px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #414141;
        opacity: 1;
    }
    .start-date{
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        color: #414141;
    }
    .date-end{
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        color: #414141;
    }
}
@media (min-width: 2500px) and (max-width: 4000px){
    /**Menú*/
    .navbar {
        background: #FFFFFF 0% 0% no-repeat padding-box!important;
        box-shadow: 0px 3px 5px #8E8E8E29;
        opacity: 1;
        height: 103px;
    }
    .navbar .navbar-brand .savmanagemnet-logo{
        max-width: 290px;
        max-height: 33px;
    }
    .navbar .img-customer{
        text-align: right;
        margin-right: -10%;
    }
    .navbar .img-customer .logo-customer{
        max-width: 110px;
        max-height: 53px;
    }
    .d-flex{
        width: 20%;
        text-align: right;
        margin-right: -13%;
    }
    .d-flex .close-section{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #646464;
        opacity: 1;
        border-radius: 10px;
        padding: 6px 13px 6px 13px;
        text-decoration: none!important;
        margin-top: 6px;
        text-align: center;
        font: normal normal 600 18px/23px 'Source Sans Pro';
        color: #4E4E4E;
    }
    .d-flex .close-section:hover{
        background: #E8E8E8 0% 0% no-repeat padding-box;
        border: 1px solid #646464;
        opacity: 1;
        border-radius: 10px;
        padding: 6px 13px 6px 13px;
        text-decoration: none!important;
        margin-top: 6px;
        text-align: center;
        font: normal normal 600 18px/23px 'Source Sans Pro';
        color: #4E4E4E;
    }
    .navbar .vl{
        border-left: 1px solid #CCCCCC;
        height: 40px;
        position: absolute;
        left: 91%;
        top: 35%;
    }

    /**Buscar*/

    .task-monitor-search{
        margin-top: 30px;
    }
    .task-monitor-search .form-control{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #C4C4C4!important;
        border-radius: 5px!important;
        color: #AAAAAA!important;
        opacity: 1;
        margin-left: 1.5%;
        margin-right: 1.5%;
        padding: 1.3em 2em 1.3em 2em;
    }
    .task-monitor-search>input:focus {
        outline:none !important;
        outline-width: 0 !important;
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        border: 1px solid #C4C4C4;
    }

    /**Resultados y actualizar*/
    .help-block{
        text-align: left;
        font: normal normal normal 20px/27px "Source Sans Pro";
        letter-spacing: 0px;
        color: #707070!important;
        opacity: 1;
        margin-left: 2.5%;
    }
    .number{
        margin-top: -1.7em;
        text-align: center;
        color: #FFFFFF;
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0;
        padding: 2px 6px 2px 6px;
    }
    #button_filter{
        background: #3F62A8 0% 0% no-repeat padding-box!important;
        border-radius: 5px;
        padding: 6px 15px 6px 15px!important;
        text-decoration: none!important;
        border: none!important;
        text-align: center;
        font: normal normal normal 18px/24px 'Source Sans Pro'!important;
        color: #FFFFFF!important;
        margin-right: 1em;
        margin-top: 0.5em;
        margin-bottom: 0.5em;
    }
    #button_filter:hover{
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 3s; /* don't forget to set a duration! */
    }
    #filter-panel{
        height: auto;
        position: absolute;
        width: 99.25%;
        z-index: 99;
        margin-top: -25px;
        margin-left: 1%;
        padding-right: 2.7em;
        padding-top: 25px;
    }
    .filter-panel-body{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        box-shadow: 0px 4px 6px #51515129;
        border-radius: 5px;
    }
    .filter-panel-body:before{
        content: "";
        position: absolute;
        top: -11.5px;
        right: 11.5em;
        width: 0;
        height: 0;
        border-width: 0 35px 35px;
        border-style: solid;
        border-color: transparent transparent #FFFFFF;
    }
    .filter-panel-body .dropdown-menu{
        border: transparent!important;
        background: #FFFFFF 0% 0% no-repeat padding-box!important;
        box-shadow: 0px 4px 6px #51515129!important;
    }
    .filter-panel-body .states-title{
        margin-left: 4.5em;
        padding-top: 2em;
    }
    .filter-panel-body .states-title>h1{
        text-align: left;
        font: normal normal 600 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
    }
    .filter-panel-body .filter-states{
        margin-top: 1.3em;
    }
    .filter-panel-body .filter-states .state_checkbox{
        margin-left: 4.5em;
    }

    .filter-panel-body>hr {
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
        border: 0;
        border-top: 1px solid #f3f2f2 !important;
        width: 95%;
    }

    .filter-panel-body .date_title{
        margin-left: 4.5em;
        margin-bottom: 1em;
    }
    .filter-panel-body .date_title>h1{
        text-align: left;
        font: normal normal 600 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
    }
    .filter-panel-body .separator{
        text-align: left;
        font: normal normal normal 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
        margin-top: 0.3em;
        margin-left: -17em;
    }
    .filter-panel-body .start_date{
        text-align: left;
        font: normal normal normal 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
        border: 2px solid #D2D2D2;
        border-radius: 5px;
        width: 188px;
        height: 46px;
        margin-left: 3.1em;
    }

    .filter-panel-body .icon-start-at{
        margin-top: -2.9em;
        margin-left: 12.8em;
        border: none!important;
        background: none!important;
    }
    .filter-panel-body .end_date{
        text-align: left;
        font: normal normal normal 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
        border: 2px solid #D2D2D2;
        border-radius: 5px;
        width: 188px;
        height: 46px;
        margin-left: 0.3em;
    }
    .filter-panel-body .icon-end-at{
        margin-top: -2.9em;
        margin-left: 9.4em;
        border: none!important;
        background: none!important;
    }
    .filter-panel-body .priority-title{
        margin-bottom: 1em;
    }
    .filter-panel-body .priority-title>h1{
        text-align: left;
        font: normal normal 600 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
    }

    .filter-panel-body .clean-filters{
        margin-left: 4.8em;
        padding-top: 0.9em;
    }
    .filter-panel-body .clean-filters .title{
        text-align: left;
        font: normal 600 normal 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #FF3434;
        cursor: pointer;
    }
    .filter-panel-body .clean-filters .title:hover{
        color:  #FF3434!important;
    }
    .filter-panel-body .filter-button{
        text-align: right;
        margin-left: -4.5em;
        margin-bottom: 2em;
        margin-top: 0.3rem;
    }
    .filter-panel-body .filter-button .close-filter{
        text-align: center;
        font: normal normal normal 18px/24px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #3F62A8;
        border: 2px solid #3F62A8;
        border-radius: 5px;
        padding: 8px 10px 8px 10px;
    }
    .filter-panel-body .filter-button .close-filter:hover{
        text-align: center;
        font: normal normal normal 18px/24px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #3F62A8;
        opacity: 1;
        background: #ffffff 0% 0% no-repeat padding-box;
        border: 2px solid #3F62A8;
        border-radius: 5px;
        padding: 8px 10px 8px 10px;
        box-shadow: 0px 0px 5px rgba(108, 108, 108, 0.39);
    }

    .filter-panel-body .filter-button .apply-filter{
        text-align: center;
        font: normal normal normal 18px/24px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #FFFFFF;
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 5px;
        padding: 9px 15px 9px 15px;
        margin-left: 1em;
    }
    .filter-panel-body .filter-button .apply-filter:hover{
        text-align: center;
        letter-spacing: 0px;
        border-radius: 5px;
        padding: 9px 15px 9px 15px;
        background: #3F62A8 0% 0% no-repeat padding-box;
        font: normal normal normal 18px/24px 'Source Sans Pro';
        color: #FFFFFF;
        box-shadow: 0px 0px 6px rgba(108, 108, 108, 0.56);
    }
    .update>a{
        text-align: left;
        font: normal normal 600 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070!important;
        opacity: 1;
        margin-right: 0.5em;
    }
    .update>button{
        background: transparent 0% 0% no-repeat padding-box;
        opacity: 1;
        border-radius: 5px;
        padding: 8px 15px 8px 15px;
        text-decoration: none!important;
        margin-top: 6px;
        text-align: center;
        font: normal normal 600 18px/23px 'Source Sans Pro';
        color: #4E4E4E;
    }
    .update>a{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        opacity: 1;
        border-radius: 5px;
        padding: 8px 15px 8px 15px;
        text-decoration: none!important;
        margin-top: 6px;
        text-align: center;
        font: normal normal 600 18px/23px 'Source Sans Pro';
        color: #4E4E4E;
    }
    .update>a:hover{
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 3s; /* don't forget to set a duration! */
    }
    /**body table*/
    .header-task-monitor{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        opacity: 1;
    }
    .header-task-monitor .text-center{
        padding: 20px 0px!important;
    }
    .header-task-monitor .customer{
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
        padding: 0px 0px 0px 20px;
    }
    .priority-class-customer-1{
        background: #6594FF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        margin-left: 30%;
        margin-right: 30%;
        padding-top: 2%;
        padding-bottom: 3%;
        text-align: center;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
    }
    .priority-class-customer-2{
        background: #1A3D8F 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        margin-left: 37%;
        margin-right: 37%;
        padding-top: 2%;
        padding-bottom: 3%;
    }
    .priority-class-customer-3{
        background: #757575 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        margin-left: 32%;
        margin-right: 32%;
        padding-top: 2%;
        padding-bottom: 3%;
    }
    .priority-class-customer-4{
        background: #FF6665 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        margin-left: 37%;
        margin-right: 37%;
        padding-top: 2%;
        padding-bottom: 3%;
    }
    .priority-class-customer-5{
        background: #FF3434 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        margin-left: 30%;
        margin-right: 30%;
        padding-top: 2%;
        padding-bottom: 3%;
    }

    .state-class-custom-8{
        background: #FF6D5D 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-2{
        background: #8B8B8B 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-3{
        background: #36B980 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-4{
        background: #1BA198 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-5{
        background: #5D9EFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-6{
        background: #FF5D5D 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-7{
        background: #FFAE36 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-1{
        background: #2D2D2D 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-9{
        background: #F456FF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-10{
        background: #5D7DFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-11{
        background: #685DFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }

    .days-task{
        text-align: center;
        font: normal normal normal 14px/18px Source Sans Pro;
        letter-spacing: 0px;
        color: #FFFFFF;
        opacity: 1;
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 5px;
        margin-left: 28%;
        margin-right: 28%;
        padding-top: 3%;
        padding-bottom: 4%;
    }
    .undo-evaluate {
        text-decoration: none !important;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF !important;
    }
    .undo-button-evaluate {
        background: #FFB114 0% 0% no-repeat padding-box;
        box-shadow: 0px 2px 4px #00000029;
        border-radius: 5px;
        opacity: 1;
        cursor: pointer;
        padding-left: 50px;
    }
    .undo-button-evaluate:hover{
        background: #FFB114 0% 0% no-repeat padding-box;
        box-shadow: 0px 2px 4px #00000029;
        border-radius: 5px;
        opacity: 1;
        cursor: pointer;
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 1s; /* don't forget to set a duration! */
    }
    .evaluate{
        text-decoration: none!important;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF!important;
        opacity: 1;
        padding-left: 18px;
    }
    .button-evaluate{
        background: #7896FB 0% 0% no-repeat padding-box;
        box-shadow: 0px 2px 4px #00000029;
        border-radius: 5px;
        opacity: 1;
    }
    .button-evaluate:hover{
        background: #7896FB 0% 0% no-repeat padding-box;
        box-shadow: 0px 2px 4px #00000029;
        border-radius: 5px;
        opacity: 1;
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 1s; /* don't forget to set a duration! */
    }
    .img-evaluate{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    /**Modal dialog*/
    .modal-dialog .modal-content .modal-body .modal-card{
        box-shadow: 0px 0px 6px #00000029;
        border-radius: 5px;
        opacity: 1;
        width: 320px;
        height: 334px;
        margin-left: 12%;
        margin-top: 3%;
        margin-bottom: 3%;
    }
    .modal-dialog .modal-content .modal-body .two-modal-card{
        box-shadow: 0px 0px 6px #00000029;
        border-radius: 5px;
        opacity: 1;
        width: 320px;
        height: 334px;
        margin-left: 2%;
        margin-top: 3%;
        margin-bottom: 3%;
    }
    .modal-dialog .modal-content .modal-body .modal-card .text-modal-monitor{
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
        padding-left: 7%;
        padding-right: 7%;
    }
    .modal-dialog .modal-content .modal-body .two-modal-card .text-modal-monitor{
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
        padding-left: 7%;
        padding-right: 7%;
    }
    .modal-dialog .modal-content .modal-body .modal-card .text-modal-monitor .bold-text{
        text-align: center;
        font: normal normal 600 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
    }
    .modal-dialog .modal-content .modal-body .two-modal-card .text-modal-monitor .bold-text{
        text-align: center;
        font: normal normal 600 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
    }
    .modal-dialog .modal-content .modal-header .modal-title{
        text-align: left;
        font: normal normal 600 24px/20px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3F62A8;
        opacity: 1;
        margin-top: 0.2em;
        margin-left: -19em;
    }
    .modal-dialog .modal-content .modal-header{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        box-shadow: 0px 1px 5px #5B5B5B29;
        border-radius: 10px 10px 0px 0px;
        opacity: 1;
    }
    .modal-dialog .modal-content .modal-body>p{
        text-align: left;
        font: normal normal normal 20px/25px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
        opacity: 1;
        padding-left: 6%;
        padding-right: 8%;
        margin-top: 1%;
    }
    .modal-dialog .modal-content .modal-footer .cancel-modal-approval{
        text-align: center;
        font: normal normal 600 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3F62A8;
        text-shadow:  0px 3px 6px #FFFFFF29;
        opacity: 1;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #3F62A8;
        border-radius: 5px;
        padding: 6px 10px 6px 10px;
    }
    .modal-dialog .modal-content .modal-footer .cancel-modal-approval:hover{
        text-align: center;
        font: normal normal 600 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3F62A8;
        opacity: 1;
        background: #ffffff 0% 0% no-repeat padding-box;
        border: 1px solid #3F62A8;
        border-radius: 5px;
        padding: 6px 10px 6px 10px;
        box-shadow: 0px 0px 5px rgba(108, 108, 108, 0.39);
    }
    .modal-dialog .modal-content .modal-footer .confirm-modal-approval{
        text-align: center;
        letter-spacing: 0px;
        opacity: 1;
        border: 1px solid #3F62A8;
        border-radius: 5px;
        padding: 6px 10px 6px 10px;
        background: #3F62A8 0% 0% no-repeat padding-box;
        font: normal normal normal 18px/23px "Source Sans Pro";
        color: #FFFFFF;
        text-shadow:  0px 3px 6px #FFFFFF29;
    }
    .modal-dialog .modal-content .modal-footer .confirm-modal-approval:hover{
        text-align: center;
        letter-spacing: 0px;
        opacity: 1;
        border: 1px solid #4168B6FF;
        border-radius: 5px;
        padding: 6px 10px 6px 10px;
        background: #4168b6 0% 0% no-repeat padding-box;
        font: normal normal normal 18px/23px "Source Sans Pro";
        color: #FFFFFF;
        box-shadow: 0px 0px 6px rgba(108, 108, 108, 0.56);
    }
    .modal-dialog .modal-content{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border-radius: 10px;
        opacity: 1;
    }

    .active{
        background: #f4f6f9!important;

    }

    .modal-dialog .modal-content .modal-body .title-one{
        text-align: left;
        font: normal normal normal 20px/25px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
        margin-top: 5%;
        margin-left: 23%;
    }
    .modal-dialog .modal-content .modal-body .title-two{
        text-align: left;
        font: italic normal 600 20px/25px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #484848;
        margin-left: 23%;
    }
    .modal-dialog .modal-content .modal-body .body-one{
        margin-top: 4%;
        background: #E8EDFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        text-align: left;
        font: normal normal bold 16px/20px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #212E58;
        opacity: 1;
        margin-right: 19.5em;
        padding-left: 2%;
        margin-left: 23%;
    }
    .modal-dialog .modal-content .modal-body .body-two{
        text-align: left;
        font: normal normal normal 16px/20px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #484848;
        margin-top: 3%;
        margin-right: 5%;
        margin-left: 23%;
    }

    .modal-dialog .modal-content .modal-body .body-three{
        text-align: left;
        font: normal normal 600 16px/20px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
        margin-right: 5%;
    }
    .modal-dialog .modal-content .modal-body .body-four{
        text-align: left;
        font: normal normal normal 16px/20px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #484848;
        margin-top: 2%;
        margin-right: 5%;
        margin-left: 23%;
    }

    /**table*/
    .accent-fuchsia .page-item.active .page-link {
        background-color: #FFFFFF!important;
        border: none!important;
        color: black;!important;
    }
    .accent-fuchsia .page-item{
        margin: 0.2em;
    }
    .accent-fuchsia .page-item .page-link {
        background-color: #ECECEC!important;
        border: none!important;
        color: black;!important;
        border-radius: 100%;
        width: 100%;
    }
    .accent-fuchsia .page-item .page-link:hover {
        background-color: #E2E2E2!important;
        border: none!important;
        color: black;!important;
        border-radius: 100%;
        width: 100%;
    }
    table, tr, td{
        border:none!important;
    }
    table, thead, th{
        border: none!important;
    }


    /**Modal secciones*/
    .three-modal-title{
        text-align: left;
        font: normal normal 600 24px/20px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3F62A8!important;
        opacity: 1;
        margin-left:3%;
        margin-top: -0.8em;
    }
    .form-control-8{
        background: #FF6D5D 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 220px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 82%;
        margin-top: -1.9em
    }
    .form-control-2{
        background: #8B8B8B 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 120px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 86.5%;
        margin-top: -1.9em
    }
    .form-control-3{
        background: #36B980 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 120px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 86.5%;
        margin-top: -1.9em
    }
    .form-control-4{
        background: #1BA198 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 235px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 81.5%;
        margin-top: -1.9em
    }
    .form-control-5{
        background: #5D9EFF 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 160px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 85%;
        margin-top: -1.9em
    }
    .form-control-6{
        background: #FF5D5D 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 180px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 84%;
        margin-top: -1.9em
    }
    .form-control-7{
        background: #FFAE36 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 230px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 81.5%;
        margin-top: -1.9em
    }
    .form-control-1{
        background: #2D2D2D 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 190px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 83.5%;
        margin-top: -1.9em
    }
    .form-control-9{
        background: #F456FF 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 250px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 81%;
        margin-top: -1.9em
    }
    .form-control-10{
        background: #5D7DFF 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 140px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 85.5%;
        margin-top: -1.9em
    }
    .form-control-11{
        background: #685DFF 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 90px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 88%;
        margin-top: -1.9em
    }
    .modal-body{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        box-shadow: 0px 1px 5px #5B5B5B29;
        border-radius: 10px 10px 0px 0px;
        opacity: 1;
        padding-bottom: 2%;
    }
    .modal-text-section .section{
        border-right: 1px solid #D2D2D2;
        transition: all 0.5s;
        padding-right: 16px;
        word-break: break-all;
    }
    .modal-text-section .section .section-title{
        text-align: left;
        font: normal normal 600 22px/28px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #484848;
        opacity: 1;
        margin-top: 5%;
        margin-left: 10%;
        margin-bottom: 2%
    }
    .modal-text-section .vl{
        border: 1px solid #D2D2D2;
        height: 894px;
        position: absolute;
        left: 94%;
        margin-left: -3px;
        top: 0;
    }
    .modal-text-section .line{
        border: 1px solid #D2D2D2;
        height: 894px;
        position: absolute;
        left: 99%;
        margin-left: -3px;
        top: 0;
    }
    .modal-text-section .date{
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #4A4A4A;
        opacity: 1;
        margin-left: 4%;
        margin-top: 4%;
    }
    .modal-text-section .section-evaluate{
        background: #7896FB 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        width: 120px;
        height: 35px;
        padding-top: 5px;
        margin-left: 87%;
        margin-top: -3em;
        text-align: center;
        text-decoration: none!important;
    }
    .modal-text-section .section-evaluate:hover{
        background: #7896FB 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        width: 120px;
        height: 35px;
        padding-top: 5px;
        margin-left: 87%;
        margin-top: -3em;
        text-align: center;
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 1s; /* don't forget to set a duration! */
    }
    .modal-text-section .section-undo-evaluate{
        background: #FFB114 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        width: 180px;
        height: 35px;
        padding-top: 5px;
        margin-left: 83.7%;
        margin-top: -3em;
        text-align: center;
    }
    .modal-text-section .sections-evaluate{
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF!important;
        opacity: 1;
        text-decoration: none!important;
    }
    .modal-text-section .section-undo-evaluate:hover{
        background: #FFB114 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        width: 180px;
        height: 35px;
        padding-top: 5px;
        margin-left: 83.7%;
        margin-top: -3em;
        text-align: center;
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 1s; /* don't forget to set a duration! */
    }
    .modal-text-section .valign-middle-img{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        width: 120px;
        height: 35px;
        padding-top: 5px;
        margin-left: 89%;
        margin-top: -3em;
    }
    .modal-text-section .option_{
        margin-bottom: 0.6em;
        margin-top: 0.6em;
    }
    .modal-text-section .option_:hover{
        background: #f5f4f4;
    }
    .modal-text-section .active-button{
        background: #F1F1F1;
    }
    .modal-text-section .dropdown-item:active {
        color: #fff;
        text-decoration: none;
        background-color: #F1F1F1;
    }

    /**Linea centro*/
    .center_line>div{
        border: 1px solid #D2D2D2;
        opacity: 1;
        margin-right: 4%;
        margin-left: 2%;
    }
    .center_line{
        margin: 25px;
    }
    .modal-text-section .title{
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #222E58;
        opacity: 1;
        cursor: pointer;
    }
    .modal-text-section .title:hover{
        color: #222E58;
        cursor: pointer;
    }

    /***/
    .dropdown-toggle .title{
        margin-left: 20%;
        background: #FFFFFF;
    }
    .footer{
        text-align: right;
        margin-left: 48em;
        margin-bottom: 1em;
    }
    .footer>button{
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        padding: 10px 20px 10px 20px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        text-shadow: 0px 3px 6px #FFFFFF29;
        border: 1px solid #4168B6FF;
        box-shadow: 0px 0px 6px transparent;
    }
    .footer>button:hover{
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        padding: 10px 20px 10px 20px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        text-shadow: 0px 3px 6px #FFFFFF29;
        border: 1px solid #4168B6FF;
        box-shadow: 0px 0px 6px rgba(108, 108, 108, 0.56);
    }
    .footer>button:focus{
        outline:none !important;
        outline-width: 0 !important;
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        border: 1px solid #3F62A8;
    }
    .archive-task-monitor{
        background: #F1F1F1  0% 0% no-repeat padding-box;
        box-shadow: 0px 0px 4px #00000029;
        border-radius: 5px;
        opacity: 1;
        margin-left: 20px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3E3E3E!important;
        text-shadow:  0px 3px 6px #FFFFFF29;
        border: none!important;
        padding: 5px 12px 5px 12px;
    }
    .comment-task-monitor{
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848!important;
    }
    .include-task-monitor{
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848!important;
        padding: 2em 2em 2em 2em;
        border-radius: 5px;
        background: #F1F1F1 0% 0% no-repeat padding-box;
        border: 1px solid #E9E9E9;
    }
    .include-task-monitor:hover{
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848!important;
        padding: 2em 2em 2em 2em;
        border-radius: 5px;
        background: #F1F1F1 0% 0% no-repeat padding-box;
        box-shadow: 0px 0px 4px rgba(108, 108, 108, 0.39);
        border: 1px solid #E9E9E9;
    }
    nav svg{
        height: 20px;
    }
    nav span{
        text-align: left;
        font: normal normal normal 20px/27px "Source Sans Pro";
        letter-spacing: 0px;
        color: #707070;
        opacity: 1;
    }


    /**Modal*/

    .not-confirm-on-state-change{
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        letter-spacing: 0px;
        color: #FFFFFF;
        text-shadow:  0px 3px 6px #FFFFFF29;
        width: 90px;
        height: 35px;
        border: 1px solid #4168B6FF;
        padding: 6px 10px 6px 10px;
        background: #4168b6 0% 0% no-repeat padding-box;
        font: normal normal normal 18px/23px "Source Sans Pro";
        box-shadow: 0px 0px 6px transparent;
    }
    .not-confirm-on-state-change:hover{
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        letter-spacing: 0px;
        color: #FFFFFF;
        text-shadow:  0px 3px 6px #FFFFFF29;
        width: 90px;
        height: 35px;
        border: 1px solid #4168B6FF;
        padding: 6px 10px 6px 10px;
        background: #4168b6 0% 0% no-repeat padding-box;
        font: normal normal normal 18px/23px "Source Sans Pro";
        box-shadow: 0px 0px 6px rgba(108, 108, 108, 0.56);
    }
    .not-confirm-on-state-change:focus{
        outline:none !important;
        outline-width: 0 !important;
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        border: 1px solid #3F62A8;
    }
    .confirm-on-state-change {
        font: normal normal 600 18px/23px 'Source Sans Pro';
        color: #3F62A8;
        text-shadow:  0px 3px 6px #FFFFFF29;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #3F62A8;
        border-radius: 5px;
        opacity: 1;
        width: 90px;
        height: 35px;
        margin-top: 20px;
        text-align: center;
        padding: 6px 10px 6px 10px;
    }
    .confirm-on-state-change:hover {
        text-shadow:  0px 3px 6px #FFFFFF29;
        border-radius: 5px;
        opacity: 1;
        width: 90px;
        height: 35px;
        margin-top: 20px;
        text-align: center;
        font: normal normal 600 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3F62A8;
        background: #ffffff 0% 0% no-repeat padding-box;
        border: 1px solid #3F62A8;
        padding: 6px 10px 6px 10px;
        box-shadow: 0px 0px 5px rgba(108, 108, 108, 0.39);
    }
    /** Modal de rechazo  **/
    #undoModal .process{
        font: normal normal 600 18px/23px 'Source Sans Pro';
        color: #474747;
        text-shadow:  0px 3px 6px #FFFFFF29;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #464646;
        border-radius: 5px;
        opacity: 1;
        margin-top: 30px;
        text-align: center;
        padding: 5px 2em 5px 2em;
    }
    /** Calificación**/

    #task_monitor_confirmModal .process{
        font: normal normal 600 18px/23px 'Source Sans Pro';
        color: #3F62A8;
        text-shadow:  0px 3px 6px #3F62A8;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #3F62A8;
        border-radius: 5px;
        opacity: 1;
        margin-top: 40px;
        text-align: center;
        padding: 5px 2em 5px 2em;
    }
    /**
      CUSTOM PAGINATOR
     */
    /**Paginación*/

    .page-item{
        background: #ECECEC!important;
    }
    .page-link{
        text-align: center;
        font: normal normal normal 20px/25px "Source Sans Pro";
        letter-spacing: 0px;
        color: #414141!important;
        opacity: 1;
        margin: 0.5em;
        border-radius: 100%!important;
    }

    .current-page{
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 20px!important;
        opacity: 1;
        color: #FFFFFF;
        padding: 1px 8px 1px 8px;
    }
    .custom_paginator .pagination li.page-item.disabled>span{
        background: #E2E2E2!important;
        color: #414141 !important;
    }
    .custom_paginator .pagination li.page-item.active>span,
    .custom_paginator .pagination li.page-item.active>span{
        text-align: center;
        color: #FFFFFF!important;
        border-radius: 100%!important;
        width: 100%;
        background: #3F62A8!important;
    }

    .custom_paginator .pagination li:first-child>button,
    .custom_paginator .pagination li:first-child>span,
    .custom_paginator .pagination li:last-child>button,
    .custom_paginator .pagination li:last-child>span{
        text-align: center;
        color: #fff0f0!important;
        border-radius: 100%!important;
        max-width: 100%;
        background: #3F62A8!important;
        /*width: 2em!important;*/
    }

    .custom_paginator .pagination li:first-child>button:hover,
    .custom_paginator .pagination li:last-child>button:hover{
        text-align: center;
        color: #FFFFFF!important;
        max-width: 100%;
        border-radius: 100%!important;
        background: #3F62A8!important;
    }

    /**Modal de secciones**/
    .modal-header-section .reloj{
        width: 120px;
        height: 35px;
        border: 1px solid #B8B8B8!important;
        background: #FFFFFF!important;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #757575;
        margin-left: 92.5%;
        margin-top: -2.3em
    }

    .modal-header-section .type-state{
        text-align: center;
        color: #FFFFFF;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        padding-top: 5px
    }
    .modal-header-section .close{
        margin-top: -2.3em;
        margin-right: -0.7%;
    }


    /**Modal Cerrar*/

    /**Linea centro*/
    .modal-close .modal-close .close-line>div{
        border: 1px solid #D2D2D2;
        opacity: 1;
        margin-right: 10%;
        margin-left: 10%;
    }
    .modal-close .modal-close .close-line{
        margin: 25px;
    }

    /**Modal uno*/
    .option_confirm:hover{
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 1s; /* don't forget to set a duration! */
    }
    .form-control:focus{
        outline:none !important;
        outline-width: 0 !important;
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        border: 1px solid #C4C4C4!important;
    }

    /**table customer*/

    .header-task-monitor  .state-title{
        width: 5%;
        vertical-align: middle;
    }
    .header-task-monitor .state-title .state-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor .customer{
        vertical-align: middle;
    }
    .header-task-monitor .customer .customer-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor .start-date{
        vertical-align: middle;
    }
    .header-task-monitor .start-date .start-date-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor .end-date{
        vertical-align: middle
    }
    .header-task-monitor .end-date .end-date-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor .cycle{
        vertical-align: middle
    }
    .header-task-monitor .cycle .task-cycle-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor .priority-title{
        vertical-align: middle
    }

    .header-task-monitor .priority-title .priority-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor .approval-title{
        vertical-align: middle;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }

    .hover-table{
        background-color: white !important;
    }
    .hover-table:hover{
        background-color: #f4f6f9 !important;
    }

    .edge-of-state{
        background: white;
        position: relative;
        border-radius: 8px;
    }
    .edge-of-state .customer-state-of-edge{
        position: absolute;
        left:-1.7em;
        top: 10px;
        background:white;
        width: 5px;
        height: 58px;
        border-radius: 0 3px 3px 0;
    }
    .name-state{
        text-align: left;
        font: normal normal normal 18px/22px 'Source Sans Pro';
        color: #FFFFFF;
        width: 171px;
        padding-top: 25px;
        padding-bottom: 25px;
        vertical-align: middle!important;
    }
    .showTask .name{
        text-align: left;
        font: normal normal normal 15px/19px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #777777;
        opacity: 1;
    }
    .table td, .table th {
        padding: 0.75rem;
        vertical-align: middle!important;
        border-top: 1px solid #dee2e6;
    }
    .showTask .img-state{
        text-align: left;
        font: normal normal normal 20px/25px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #414141;
        opacity: 1;
    }
    .start-date{
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        color: #414141;
    }
    .date-end{
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        color: #414141;
    }
}
@media (min-width: 4000px) and (max-width: 8000px){
    /**Menú*/
    .navbar {
        background: #FFFFFF 0% 0% no-repeat padding-box!important;
        box-shadow: 0px 3px 5px #8E8E8E29;
        opacity: 1;
        height: 103px;
    }
    .navbar .navbar-brand .savmanagemnet-logo{
        max-width: 290px;
        max-height: 33px;
    }
    .navbar .img-customer{
        text-align: right;
    }
    .navbar .img-customer .logo-customer{
        max-width: 110px;
        max-height: 53px;
    }
    .d-flex{
        width: 20%;
        text-align: right;
        margin-right: -13%;
    }
    .d-flex .close-section{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #646464;
        opacity: 1;
        border-radius: 10px;
        padding: 6px 13px 6px 13px;
        text-decoration: none!important;
        margin-top: 6px;
        text-align: center;
        font: normal normal 600 18px/23px 'Source Sans Pro';
        color: #4E4E4E;
    }
    .d-flex .close-section:hover{
        background: #E8E8E8 0% 0% no-repeat padding-box;
        border: 1px solid #646464;
        opacity: 1;
        border-radius: 10px;
        padding: 6px 13px 6px 13px;
        text-decoration: none!important;
        margin-top: 6px;
        text-align: center;
        font: normal normal 600 18px/23px 'Source Sans Pro';
        color: #4E4E4E;
    }
    .navbar .vl{
        border-left: 1px solid #CCCCCC;
        height: 40px;
        position: absolute;
        left: 91%;
        top: 35%;
    }

    /**Buscar*/

    .task-monitor-search{
        margin-top: 30px;
    }
    .task-monitor-search .form-control{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #C4C4C4!important;
        border-radius: 5px!important;
        color: #AAAAAA!important;
        opacity: 1;
        margin-left: 1%;
        margin-right: 1%;
        padding: 1.3em 2em 1.3em 2em;
    }
    .task-monitor-search>input:focus {
        outline:none !important;
        outline-width: 0 !important;
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        border: 1px solid #C4C4C4;
    }

    /**Resultados y actualizar*/
    .help-block{
        text-align: left;
        font: normal normal normal 20px/27px "Source Sans Pro";
        letter-spacing: 0px;
        color: #707070!important;
        opacity: 1;
        margin-left: 2.5%;
    }
    .number{
        margin-top: -1.7em;
        text-align: center;
        color: #FFFFFF;
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0;
        padding: 2px 6px 2px 6px;
    }
    #button_filter{
        background: #3F62A8 0% 0% no-repeat padding-box!important;
        border-radius: 5px;
        padding: 6px 15px 6px 15px!important;
        text-decoration: none!important;
        border: none!important;
        text-align: center;
        font: normal normal normal 18px/24px 'Source Sans Pro'!important;
        color: #FFFFFF!important;
        margin-right: 1em;
        margin-top: 0.5em;
        margin-bottom: 0.5em;
    }
    #button_filter:hover{
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 3s; /* don't forget to set a duration! */
    }
    #filter-panel{
        height: auto;
        position: absolute;
        width: 99.25%;
        z-index: 99;
        margin-top: -25px;
        margin-left: 1%;
        padding-right: 2.7em;
        padding-top: 25px;
    }
    .filter-panel-body{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        box-shadow: 0px 4px 6px #51515129;
        border-radius: 5px;
    }
    .filter-panel-body:before{
        content: "";
        position: absolute;
        top: -11.5px;
        right: 11.5em;
        width: 0;
        height: 0;
        border-width: 0 35px 35px;
        border-style: solid;
        border-color: transparent transparent #FFFFFF;
    }
    .filter-panel-body .dropdown-menu{
        border: transparent!important;
        background: #FFFFFF 0% 0% no-repeat padding-box!important;
        box-shadow: 0px 4px 6px #51515129!important;
    }
    .filter-panel-body .states-title{
        margin-left: 4.5em;
        padding-top: 2em;
    }
    .filter-panel-body .states-title>h1{
        text-align: left;
        font: normal normal 600 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
    }
    .filter-panel-body .filter-states{
        margin-top: 1.3em;
    }
    .filter-panel-body .filter-states .state_checkbox{
        margin-left: 4.5em;
    }

    .filter-panel-body>hr {
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
        border: 0;
        border-top: 1px solid #f3f2f2 !important;
        width: 95%;
    }

    .filter-panel-body .date_title{
        margin-left: 4.5em;
        margin-bottom: 1em;
    }
    .filter-panel-body .date_title>h1{
        text-align: left;
        font: normal normal 600 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
    }
    .filter-panel-body .separator{
        text-align: left;
        font: normal normal normal 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
        margin-top: 0.3em;
        margin-left: -15em;
    }
    .filter-panel-body .start_date{
        text-align: left;
        font: normal normal normal 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
        border: 2px solid #D2D2D2;
        border-radius: 5px;
        width: 188px;
        height: 46px;
        margin-left: 3.1em;
    }

    .filter-panel-body .icon-start-at{
        margin-top: -2.9em;
        margin-left: 12.8em;
        border: none!important;
        background: none!important;
    }
    .filter-panel-body .end_date{
        text-align: left;
        font: normal normal normal 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
        border: 2px solid #D2D2D2;
        border-radius: 5px;
        width: 188px;
        height: 46px;
        margin-left: 0.3em;
    }
    .filter-panel-body .icon-end-at{
        margin-top: -2.9em;
        margin-left: 9.4em;
        border: none!important;
        background: none!important;
    }
    .filter-panel-body .priority-title{
        margin-bottom: 1em;
    }
    .filter-panel-body .priority-title>h1{
        text-align: left;
        font: normal normal 600 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070;
    }

    .filter-panel-body .clean-filters{
        margin-left: 4.8em;
        padding-top: 0.9em;
    }
    .filter-panel-body .clean-filters .title{
        text-align: left;
        font: normal 600 normal 20px/27px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #FF3434;
        cursor: pointer;
    }
    .filter-panel-body .clean-filters .title:hover{
        color:  #FF3434!important;
    }
    .filter-panel-body .filter-button{
        text-align: right;
        margin-left: -4.5em;
        margin-bottom: 2em;
        margin-top: 0.3rem;
    }
    .filter-panel-body .filter-button .close-filter{
        text-align: center;
        font: normal normal normal 18px/24px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #3F62A8;
        border: 2px solid #3F62A8;
        border-radius: 5px;
        padding: 8px 10px 8px 10px;
    }
    .filter-panel-body .filter-button .close-filter:hover{
        text-align: center;
        font: normal normal normal 18px/24px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #3F62A8;
        opacity: 1;
        background: #ffffff 0% 0% no-repeat padding-box;
        border: 2px solid #3F62A8;
        border-radius: 5px;
        padding: 8px 10px 8px 10px;
        box-shadow: 0px 0px 5px rgba(108, 108, 108, 0.39);
    }

    .filter-panel-body .filter-button .apply-filter{
        text-align: center;
        font: normal normal normal 18px/24px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #FFFFFF;
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 5px;
        padding: 9px 15px 9px 15px;
        margin-left: 1em;
    }
    .filter-panel-body .filter-button .apply-filter:hover{
        text-align: center;
        letter-spacing: 0px;
        border-radius: 5px;
        padding: 9px 15px 9px 15px;
        background: #3F62A8 0% 0% no-repeat padding-box;
        font: normal normal normal 18px/24px 'Source Sans Pro';
        color: #FFFFFF;
        box-shadow: 0px 0px 6px rgba(108, 108, 108, 0.56);
    }
    .update>a{
        text-align: left;
        font: normal normal 600 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #707070!important;
        opacity: 1;
        margin-right: -0.6em;
    }
    .update>button{
        background: transparent 0% 0% no-repeat padding-box;
        opacity: 1;
        border-radius: 5px;
        padding: 8px 15px 8px 15px;
        text-decoration: none!important;
        margin-top: 6px;
        text-align: center;
        font: normal normal 600 18px/23px 'Source Sans Pro';
        color: #707070;
    }
    .update>a{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        opacity: 1;
        border-radius: 5px;
        padding: 8px 15px 8px 15px;
        text-decoration: none!important;
        margin-top: 6px;
        text-align: center;
        font: normal normal 600 18px/23px 'Source Sans Pro';
        color: #707070;
    }
    .update>a:hover{
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 3s; /* don't forget to set a duration! */
    }
    /**body table*/
    .header-task-monitor{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        opacity: 1;
    }
    .header-task-monitor .text-center{
       padding: 20px 0px!important;
    }
    .header-task-monitor .customer{
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
        padding: 0px 0px 0px 20px;
    }
    .priority-class-customer-1{
        background: #6594FF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        margin-left: 30%;
        margin-right: 30%;
        padding-top: 2%;
        padding-bottom: 3%;
        text-align: center;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
    }
    .priority-class-customer-2{
        background: #1A3D8F 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        margin-left: 37%;
        margin-right: 37%;
        padding-top: 2%;
        padding-bottom: 3%;
    }
    .priority-class-customer-3{
        background: #757575 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        margin-left: 32%;
        margin-right: 32%;
        padding-top: 2%;
        padding-bottom: 3%;
    }
    .priority-class-customer-4{
        background: #FF6665 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        margin-left: 37%;
        margin-right: 37%;
        padding-top: 2%;
        padding-bottom: 3%;
    }
    .priority-class-customer-5{
        background: #FF3434 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        font: normal normal normal 14px/18px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        margin-left: 30%;
        margin-right: 30%;
        padding-top: 2%;
        padding-bottom: 3%;
    }

    .state-class-custom-8{
        background: #FF6D5D 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-2{
        background: #8B8B8B 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-3{
        background: #36B980 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-4{
        background: #1BA198 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-5{
        background: #5D9EFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-6{
        background: #FF5D5D 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-7{
        background: #FFAE36 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-1{
        background: #2D2D2D 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-9{
        background: #F456FF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-10{
        background: #5D7DFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    .state-class-custom-11{
        background: #685DFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }

    .days-task{
        text-align: center;
        font: normal normal normal 14px/18px Source Sans Pro;
        letter-spacing: 0px;
        color: #FFFFFF;
        opacity: 1;
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 5px;
        margin-left: 28%;
        margin-right: 28%;
        padding-top: 3%;
        padding-bottom: 4%;
    }
    .undo-evaluate {
        text-decoration: none !important;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF !important;
        margin-left: 5%;
    }
    .undo-button-evaluate {
        background: #FFB114 0% 0% no-repeat padding-box;
        box-shadow: 0px 2px 4px #00000029;
        border-radius: 5px;
        opacity: 1;
        cursor: pointer;
        padding-left: 50px;
    }
    .undo-button-evaluate:hover{
        background: #FFB114 0% 0% no-repeat padding-box;
        box-shadow: 0px 2px 4px #00000029;
        border-radius: 5px;
        opacity: 1;
        cursor: pointer;
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 1s; /* don't forget to set a duration! */
    }
    .evaluate{
        text-decoration: none!important;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF!important;
        opacity: 1;
        margin-left: 5%;
    }
    .button-evaluate{
        background: #7896FB 0% 0% no-repeat padding-box;
        box-shadow: 0px 2px 4px #00000029;
        border-radius: 5px;
        opacity: 1;
    }
    .button-evaluate:hover{
        background: #7896FB 0% 0% no-repeat padding-box;
        box-shadow: 0px 2px 4px #00000029;
        border-radius: 5px;
        opacity: 1;
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 1s; /* don't forget to set a duration! */
    }
    .img-evaluate{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
    }
    /**Modal dialog*/
    .modal-dialog .modal-content .modal-body .modal-card{
        box-shadow: 0px 0px 6px #00000029;
        border-radius: 5px;
        opacity: 1;
        width: 320px;
        height: 334px;
        margin-left: 12%;
        margin-top: 3%;
        margin-bottom: 3%;
    }
    .modal-dialog .modal-content .modal-body .two-modal-card{
        box-shadow: 0px 0px 6px #00000029;
        border-radius: 5px;
        opacity: 1;
        width: 320px;
        height: 334px;
        margin-left: 2%;
        margin-top: 3%;
        margin-bottom: 3%;
    }
    .modal-dialog .modal-content .modal-body .modal-card .text-modal-monitor{
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
        padding-left: 7%;
        padding-right: 7%;
    }
    .modal-dialog .modal-content .modal-body .two-modal-card .text-modal-monitor{
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
        padding-left: 7%;
        padding-right: 7%;
    }
    .modal-dialog .modal-content .modal-body .modal-card .text-modal-monitor .bold-text{
        text-align: center;
        font: normal normal 600 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
    }
    .modal-dialog .modal-content .modal-body .two-modal-card .text-modal-monitor .bold-text{
        text-align: center;
        font: normal normal 600 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
    }
    .modal-dialog .modal-content .modal-header .modal-title{
        text-align: left;
        font: normal normal 600 24px/20px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3F62A8;
        opacity: 1;
        margin-top: 0.2em;
        margin-left: -19em;
    }
    .modal-dialog .modal-content .modal-header{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        box-shadow: 0px 1px 5px #5B5B5B29;
        border-radius: 10px 10px 0px 0px;
        opacity: 1;
    }
    .modal-dialog .modal-content .modal-body>p{
        text-align: left;
        font: normal normal normal 20px/25px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
        opacity: 1;
        padding-left: 6%;
        padding-right: 8%;
        margin-top: 1%;
    }
    .modal-dialog .modal-content .modal-footer .cancel-modal-approval{
        text-align: center;
        font: normal normal 600 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3F62A8;
        text-shadow:  0px 3px 6px #FFFFFF29;
        opacity: 1;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #3F62A8;
        border-radius: 5px;
        padding: 6px 10px 6px 10px;
    }
    .modal-dialog .modal-content .modal-footer .cancel-modal-approval:hover{
        text-align: center;
        font: normal normal 600 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3F62A8;
        opacity: 1;
        background: #ffffff 0% 0% no-repeat padding-box;
        border: 1px solid #3F62A8;
        border-radius: 5px;
        padding: 6px 10px 6px 10px;
        box-shadow: 0px 0px 5px rgba(108, 108, 108, 0.39);
    }
    .modal-dialog .modal-content .modal-footer .confirm-modal-approval{
        text-align: center;
        letter-spacing: 0px;
        opacity: 1;
        border: 1px solid #3F62A8;
        border-radius: 5px;
        padding: 6px 10px 6px 10px;
        background: #3F62A8 0% 0% no-repeat padding-box;
        font: normal normal normal 18px/23px "Source Sans Pro";
        color: #FFFFFF;
        text-shadow:  0px 3px 6px #FFFFFF29;
    }
    .modal-dialog .modal-content .modal-footer .confirm-modal-approval:hover{
        text-align: center;
        letter-spacing: 0px;
        opacity: 1;
        border: 1px solid #4168B6FF;
        border-radius: 5px;
        padding: 6px 10px 6px 10px;
        background: #4168b6 0% 0% no-repeat padding-box;
        font: normal normal normal 18px/23px "Source Sans Pro";
        color: #FFFFFF;
        box-shadow: 0px 0px 6px rgba(108, 108, 108, 0.56);
    }
    .modal-dialog .modal-content{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border-radius: 10px;
        opacity: 1;
    }

    .active{
        background: #f4f6f9!important;

    }

    .modal-dialog .modal-content .modal-body .title-one{
        text-align: left;
        font: normal normal normal 20px/25px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
        margin-top: 5%;
        margin-left: 23%;
    }
    .modal-dialog .modal-content .modal-body .title-two{
        text-align: left;
        font: italic normal 600 20px/25px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #484848;
        margin-left: 23%;
    }
    .modal-dialog .modal-content .modal-body .body-one{
        margin-top: 4%;
        background: #E8EDFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        text-align: left;
        font: normal normal bold 16px/20px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #212E58;
        opacity: 1;
        margin-right: 19.5em;
        padding-left: 2%;
        margin-left: 23%;
    }
    .modal-dialog .modal-content .modal-body .body-two{
        text-align: left;
        font: normal normal normal 16px/20px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #484848;
        margin-top: 3%;
        margin-right: 5%;
        margin-left: 23%;
    }

    .modal-dialog .modal-content .modal-body .body-three{
        text-align: left;
        font: normal normal 600 16px/20px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848;
        margin-right: 5%;
    }
    .modal-dialog .modal-content .modal-body .body-four{
        text-align: left;
        font: normal normal normal 16px/20px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #484848;
        margin-top: 2%;
        margin-right: 5%;
        margin-left: 23%;
    }

    /**table*/
    .accent-fuchsia .page-item.active .page-link {
        background-color: #FFFFFF!important;
        border: none!important;
        color: black;!important;
    }
    .accent-fuchsia .page-item{
        margin: 0.2em;
    }
    .accent-fuchsia .page-item .page-link {
        background-color: #ECECEC!important;
        border: none!important;
        color: black;!important;
        border-radius: 100%;
        width: 100%;
    }
    .accent-fuchsia .page-item .page-link:hover {
        background-color: #E2E2E2!important;
        border: none!important;
        color: black;!important;
        border-radius: 100%;
        width: 100%;
    }
    table, tr, td{
        border:none!important;
    }
    table, thead, th{
        border: none!important;
    }


    /**Modal secciones*/
    .three-modal-title{
        text-align: left;
        font: normal normal 600 24px/20px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3F62A8!important;
        opacity: 1;
        margin-left:3%;
        margin-top: -0.8em;
    }
    .form-control-8{
        background: #FF6D5D 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 220px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 82%;
        margin-top: -1.9em
    }
    .form-control-2{
        background: #8B8B8B 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 120px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 86.5%;
        margin-top: -1.9em
    }
    .form-control-3{
        background: #36B980 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 120px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 86.5%;
        margin-top: -1.9em
    }
    .form-control-4{
        background: #1BA198 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 235px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 81.5%;
        margin-top: -1.9em
    }
    .form-control-5{
        background: #5D9EFF 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 160px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 85%;
        margin-top: -1.9em
    }
    .form-control-6{
        background: #FF5D5D 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 180px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 84%;
        margin-top: -1.9em
    }
    .form-control-7{
        background: #FFAE36 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 230px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 81.5%;
        margin-top: -1.9em
    }
    .form-control-1{
        background: #2D2D2D 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 190px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 83.5%;
        margin-top: -1.9em
    }
    .form-control-9{
        background: #F456FF 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 250px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 81%;
        margin-top: -1.9em
    }
    .form-control-10{
        background: #5D7DFF 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 140px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 85.5%;
        margin-top: -1.9em
    }
    .form-control-11{
        background: #685DFF 0% 0% no-repeat padding-box;
        opacity: 1;
        width: 90px;
        height: 35px;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        margin-left: 88%;
        margin-top: -1.9em
    }
    .modal-body{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        box-shadow: 0px 1px 5px #5B5B5B29;
        border-radius: 10px 10px 0px 0px;
        opacity: 1;
        padding-bottom: 2%;
    }
    .modal-text-section .section{
        border-right: 1px solid #D2D2D2;
        transition: all 0.5s;
        padding-right: 16px;
        word-break: break-all;
    }
    .modal-text-section .section .section-title{
        text-align: left;
        font: normal normal 600 22px/28px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #484848;
        opacity: 1;
        margin-top: 5%;
        margin-left: 10%;
        margin-bottom: 2%
    }
    .modal-text-section .vl{
        border: 1px solid #D2D2D2;
        height: 894px;
        position: absolute;
        left: 94%;
        margin-left: -3px;
        top: 0;
    }
    .modal-text-section .line{
        border: 1px solid #D2D2D2;
        height: 894px;
        position: absolute;
        left: 99%;
        margin-left: -3px;
        top: 0;
    }
    .modal-text-section .date{
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #4A4A4A;
        opacity: 1;
        margin-left: 4%;
        margin-top: 4%;
    }
    .modal-text-section .section-evaluate{
        background: #7896FB 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        width: 120px;
        height: 35px;
        padding-top: 5px;
        margin-left: 87%;
        margin-top: -3em;
        text-align: center;
        text-decoration: none!important;
    }
    .modal-text-section .section-evaluate:hover{
        background: #7896FB 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        width: 120px;
        height: 35px;
        padding-top: 5px;
        margin-left: 87%;
        margin-top: -3em;
        text-align: center;
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 1s; /* don't forget to set a duration! */
    }
    .modal-text-section .section-undo-evaluate{
        background: #FFB114 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        width: 180px;
        height: 35px;
        padding-top: 5px;
        margin-left: 83.7%;
        margin-top: -3em;
        text-align: center;
    }
    .modal-text-section .sections-evaluate{
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF!important;
        opacity: 1;
        text-decoration: none!important;
    }
    .modal-text-section .section-undo-evaluate:hover{
        background: #FFB114 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        width: 180px;
        height: 35px;
        padding-top: 5px;
        margin-left: 83.7%;
        margin-top: -3em;
        text-align: center;
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 1s; /* don't forget to set a duration! */
    }
    .modal-text-section .valign-middle-img{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        width: 120px;
        height: 35px;
        padding-top: 5px;
        margin-left: 89%;
        margin-top: -3em;
    }
    .modal-text-section .option_{
        margin-bottom: 0.6em;
        margin-top: 0.6em;
    }
    .modal-text-section .option_:hover{
        background: #f5f4f4;
    }
    .modal-text-section .active-button{
        background: #F1F1F1;
    }
    .modal-text-section .dropdown-item:active {
        color: #fff;
        text-decoration: none;
        background-color: #F1F1F1;
    }

    /**Linea centro*/
    .center_line>div{
        border: 1px solid #D2D2D2;
        opacity: 1;
        margin-right: 4%;
        margin-left: 2%;
    }
    .center_line{
        margin: 25px;
    }
    .modal-text-section .title{
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #222E58;
        opacity: 1;
        cursor: pointer;
    }
    .modal-text-section .title:hover{
        color: #222E58;
        cursor: pointer;
    }

    /***/
    .dropdown-toggle .title{
        margin-left: 20%;
        background: #FFFFFF;
    }
    .footer{
        text-align: right;
        margin-left: 48em;
        margin-bottom: 1em;
    }
    .footer>button{
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        padding: 10px 20px 10px 20px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        text-shadow: 0px 3px 6px #FFFFFF29;
        border: 1px solid #4168B6FF;
        box-shadow: 0px 0px 6px transparent;
    }
    .footer>button:hover{
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        padding: 10px 20px 10px 20px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #FFFFFF;
        text-shadow: 0px 3px 6px #FFFFFF29;
        border: 1px solid #4168B6FF;
        box-shadow: 0px 0px 6px rgba(108, 108, 108, 0.56);
    }
    .footer>button:focus{
        outline:none !important;
        outline-width: 0 !important;
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        border: 1px solid #3F62A8;
    }
    .archive-task-monitor{
        background: #F1F1F1  0% 0% no-repeat padding-box;
        box-shadow: 0px 0px 4px #00000029;
        border-radius: 5px;
        opacity: 1;
        margin-left: 20px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3E3E3E!important;
        text-shadow:  0px 3px 6px #FFFFFF29;
        border: none!important;
        padding: 5px 12px 5px 12px;
    }
    .comment-task-monitor{
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848!important;
    }
    .include-task-monitor{
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848!important;
        padding: 2em 2em 2em 2em;
        border-radius: 5px;
        background: #F1F1F1 0% 0% no-repeat padding-box;
        border: 1px solid #E9E9E9;
    }
    .include-task-monitor:hover{
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #484848!important;
        padding: 2em 2em 2em 2em;
        border-radius: 5px;
        background: #F1F1F1 0% 0% no-repeat padding-box;
        box-shadow: 0px 0px 4px rgba(108, 108, 108, 0.39);
        border: 1px solid #E9E9E9;
    }
    nav svg{
        height: 20px;
    }
    nav span{
        text-align: left;
        font: normal normal normal 20px/27px "Source Sans Pro";
        letter-spacing: 0px;
        color: #707070;
        opacity: 1;
    }


    /**Modal*/

    .not-confirm-on-state-change{
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        letter-spacing: 0px;
        color: #FFFFFF;
        text-shadow:  0px 3px 6px #FFFFFF29;
        width: 90px;
        height: 35px;
        border: 1px solid #4168B6FF;
        padding: 6px 10px 6px 10px;
        background: #4168b6 0% 0% no-repeat padding-box;
        font: normal normal normal 18px/23px "Source Sans Pro";
        box-shadow: 0px 0px 6px transparent;
    }
    .not-confirm-on-state-change:hover{
        border-radius: 5px;
        opacity: 1;
        text-align: center;
        letter-spacing: 0px;
        color: #FFFFFF;
        text-shadow:  0px 3px 6px #FFFFFF29;
        width: 90px;
        height: 35px;
        border: 1px solid #4168B6FF;
        padding: 6px 10px 6px 10px;
        background: #4168b6 0% 0% no-repeat padding-box;
        font: normal normal normal 18px/23px "Source Sans Pro";
        box-shadow: 0px 0px 6px rgba(108, 108, 108, 0.56);
    }
    .not-confirm-on-state-change:focus{
        outline:none !important;
        outline-width: 0 !important;
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        border: 1px solid #3F62A8;
    }
    .confirm-on-state-change {
        font: normal normal 600 18px/23px 'Source Sans Pro';
        color: #3F62A8;
        text-shadow:  0px 3px 6px #FFFFFF29;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #3F62A8;
        border-radius: 5px;
        opacity: 1;
        width: 90px;
        height: 35px;
        margin-top: 20px;
        text-align: center;
        padding: 6px 10px 6px 10px;
    }
    .confirm-on-state-change:hover {
        text-shadow:  0px 3px 6px #FFFFFF29;
        border-radius: 5px;
        opacity: 1;
        width: 90px;
        height: 35px;
        margin-top: 20px;
        text-align: center;
        font: normal normal 600 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #3F62A8;
        background: #ffffff 0% 0% no-repeat padding-box;
        border: 1px solid #3F62A8;
        padding: 6px 10px 6px 10px;
        box-shadow: 0px 0px 5px rgba(108, 108, 108, 0.39);
    }
    /** Modal de rechazo  **/
    #undoModal .process{
        font: normal normal 600 18px/23px 'Source Sans Pro';
        color: #474747;
        text-shadow:  0px 3px 6px #FFFFFF29;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #464646;
        border-radius: 5px;
        opacity: 1;
        margin-top: 30px;
        text-align: center;
        padding: 5px 2em 5px 2em;
    }
    /** Calificación**/

    #task_monitor_confirmModal .process{
        font: normal normal 600 18px/23px 'Source Sans Pro';
        color: #3F62A8;
        text-shadow:  0px 3px 6px #3F62A8;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #3F62A8;
        border-radius: 5px;
        opacity: 1;
        margin-top: 40px;
        text-align: center;
        padding: 5px 2em 5px 2em;
    }
    /**
      CUSTOM PAGINATOR
     */
    /**Paginación*/

    .page-item{
        background: #ECECEC!important;
    }
    .page-link{
        text-align: center;
        font: normal normal normal 20px/25px "Source Sans Pro";
        letter-spacing: 0px;
        color: #414141!important;
        opacity: 1;
        margin: 0.5em;
        border-radius: 100%!important;
    }

    .current-page{
        background: #3F62A8 0% 0% no-repeat padding-box;
        border-radius: 20px!important;
        opacity: 1;
        color: #FFFFFF;
        padding: 1px 8px 1px 8px;
    }
    .custom_paginator .pagination li.page-item.disabled>span{
        background: #E2E2E2!important;
        color: #414141 !important;
    }
    .custom_paginator .pagination li.page-item.active>span,
    .custom_paginator .pagination li.page-item.active>span{
        text-align: center;
        color: #FFFFFF!important;
        border-radius: 100%!important;
        width: 100%;
        background: #3F62A8!important;
    }

    .custom_paginator .pagination li:first-child>button,
    .custom_paginator .pagination li:first-child>span,
    .custom_paginator .pagination li:last-child>button,
    .custom_paginator .pagination li:last-child>span{
        text-align: center;
        color: #fff0f0!important;
        border-radius: 100%!important;
        max-width: 100%;
        background: #3F62A8!important;
        /*width: 2em!important;*/
    }

    .custom_paginator .pagination li:first-child>button:hover,
    .custom_paginator .pagination li:last-child>button:hover{
        text-align: center;
        color: #FFFFFF!important;
        max-width: 100%;
        border-radius: 100%!important;
        background: #3F62A8!important;
    }
    /**Modal de secciones**/
    .modal-header-section .reloj{
        width: 120px;
        height: 35px;
        border: 1px solid #B8B8B8!important;
        background: #FFFFFF!important;
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #757575;
        margin-left: 92.5%;
        margin-top: -2.3em
    }

    .modal-header-section .type-state{
        text-align: center;
        color: #FFFFFF;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        padding-top: 5px
    }
    .modal-header-section .close{
        margin-top: -2.3em;
        margin-right: -0.7%;
    }


    /**Modal Cerrar*/

    /**Linea centro*/
    .modal-close .modal-close .close-line>div{
        border: 1px solid #D2D2D2;
        opacity: 1;
        margin-right: 10%;
        margin-left: 10%;
    }
    .modal-close .modal-close .close-line{
        margin: 25px;
    }

    /**Modal uno*/
    .option_confirm:hover{
        animation: pulse; /* referring directly to the animation's @keyframe declaration */
        animation-duration: 1s; /* don't forget to set a duration! */
    }
    .form-control:focus{
        outline:none !important;
        outline-width: 0 !important;
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        border: 1px solid #C4C4C4!important;
    }

    /**table customer*/

    .header-task-monitor .state-title{
        width: 5%;
        vertical-align: middle;
    }
    .header-task-monitor .state-title .state-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor .customer{
        vertical-align: middle;
    }
    .header-task-monitor .customer .customer-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: left;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor .start-date{
        vertical-align: middle;
    }
    .header-task-monitor .start-date .start-date-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor .end-date{
        vertical-align: middle
    }
    .header-task-monitor .end-date .end-date-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor .cycle{
        vertical-align: middle
    }
    .header-task-monitor .cycle .task-cycle-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor .priority-title{
        vertical-align: middle
    }

    .header-task-monitor .priority-title .priority-table{
        border-right: 1px solid #CCCCCC;
        height: 40px;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }
    .header-task-monitor .approval-title{
        vertical-align: middle;
        text-align: center;
        font: normal normal normal 18px/23px "Source Sans Pro";
        letter-spacing: 0px;
        color: #474747;
        opacity: 1;
    }

    .hover-table{
        background-color: white !important;
    }
    .hover-table:hover{
        background-color: #f4f6f9 !important;
    }

    .edge-of-state{
        background: white;
        position: relative;
        border-radius: 8px;
    }
    .edge-of-state .customer-state-of-edge{
        position: absolute;
        left:-1.7em;
        top: 10px;
        background:white;
        width: 5px;
        height: 58px;
        border-radius: 0 3px 3px 0;
    }
    .name-state{
        text-align: left;
        font: normal normal normal 18px/22px 'Source Sans Pro';
        color: #FFFFFF;
        width: 171px;
        padding-bottom: 10px;
        padding-top: 10px;
        vertical-align: middle!important;
    }
    .showTask .name{
        text-align: left;
        font: normal normal normal 15px/19px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #777777;
        opacity: 1;
    }
    .table td, .table th {
        padding: 0.75rem;
        vertical-align: middle!important;
        border-top: 1px solid #dee2e6;
    }
    .showTask .img-state{
        text-align: left;
        font: normal normal normal 20px/25px 'Source Sans Pro';
        letter-spacing: 0px;
        color: #414141;
        opacity: 1;
    }
    .start-date{
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        color: #414141;
    }
    .date-end{
        text-align: center;
        font: normal normal normal 18px/23px 'Source Sans Pro';
        color: #414141;
    }
}