/* ===================================
    General
====================================== */
main {
     overflow-x: clip;
}
*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
        box-sizing: border-box;
}

.card-body:hover{
  border-color: #F0CC00;
  cursor: pointer;
}

.card-body:hover .card-boton{
    background: #066e37 !important;
}

.text-cards{
    font-size: 13px;
}

.text-footer{
    font-size: 12px;
}

.swiper-wrapper span{
    font-size: 13px;
}

.box_informacion{
    font-size: 12px;
}

.text-legales{
    font-size: 12px;
}

/* ===================================
    LogIn and Reports
====================================== */
.dataTable tbody td{
    border-bottom: 1px solid #EBEBEB;
     padding: 5px 20px 0px!important;
}

.dataTables_scrollHeadInner table{
    border-radius: 10px 10px 0px 0px !important;
    background: #EBEBEB;
}

.dataTable th{
    width: 50px !important;
     padding: 0px 20px!important;

}
.dataTables_scrollBody{
    border-radius: 0px 0px 10px 10px !important;
}

.row-title{
    border: 1px solid #EBEBEB;
    box-sizing: border-box;
    border-radius: 10px 10px 0px 0px !important;
}

.dataTable {
    border: 1px solid #dee2e6;
}

.quant-reports img{
    max-width: 100%;
    height: 15px;
}
.quant-reports span{
    color: #fff;
}

.dataTables_filter {
     display: none;
}

.header-reports{
    width: 1440px;
height: 57px;
left: 0px;
top: 0px;

background: #00A14B;
}

.lni-search-alt{
    top: 10px;
    left: 50px;
    font: normal normal normal 1.5em/1 "LineIcons" !important;
}

.boton-gral-reports{
    min-width: 140px !important;
}

.calendar div{
    width: 100%;
    padding: 0px 10px;
}

.body-login{
   background:#ececec;
}

.row-title{
    white-space: nowrap;
    height: 50px;
}

.row-title th text{
    padding-left: 20px;
}

table.dataTable>thead .sorting:before {
    right: 3px !important;
}
table.dataTable>thead .sorting:after{
    right: -5px !important;
}

/* ===================================
    Ionicons
====================================== */
.rock {
     font-size: 24px;
     --ionicon-stroke-width: 16px;
}
/* ===================================
    Parallax
====================================== */
   .elements-float img {
     position: absolute;
     width: 200px;
     left: calc(50% - 100px);
     margin: 550px auto;
     opacity: 0.15;
   }
   .elements-float .icon_plant {
     margin-left: -40% !important;
     top: -600px !important;
   }

   .elements-float .icon_phone {
     margin-left: -50% !important;
     top: -200px !important;
   }

   .elements-float .icon_hands_bag {
     top: -120px !important;
   }

   .elements-float .icon_hands_coin {
     margin-left: 50% !important;
     top: -200px !important;
   }
   .elements-float .icon_wallet {
     margin-left: 40% !important;
     top: -600px !important;
   }

   .elements-float-mini img {
     position: absolute;
     width: 135px;
     left: calc(50% - 67.5px);
     margin: 550px auto;
     opacity: 0.09;
   }

   .elements-float-mini .icon_plant {
     margin-left: -45% !important;
     top: -640px !important;
   }

   .elements-float-mini .icon_phone {
     margin-left: -50% !important;
     top: -220px !important;
   }
   .elements-float-mini .icon_bag {
     margin-left: 0% !important;
     top: -430px !important;
   }

   .elements-float-mini .icon_hands_bag {
      margin-left: 45% !important;
     top: -580px !important;
   }

   .elements-float-mini .icon_hands_coin {
     margin-left: 43% !important;
     top: -250px !important;
   }
   .elements-float-mini .icon_wallet {
     margin-left: 35% !important;
     top: -640px !important;
   }


/* ===================================
    Covers & Sections
====================================== */
.cover-main {
     min-height: 700px;
}

   .elements-float,
   .elements-float-mini {
     position: absolute;
     z-index: 0;
     width: 100%;
     height: 1px;

   }

.cover-int {
     min-height: 500px;
}
.cover-big-icon {
     max-width: 530px;
     bottom: -100px;
}
.circulo-cover-verde {
     height: 100%;
     width: 100%;
     top: -1px;
     background: #00A14B;
     position: absolute;
     background: green;
     -webkit-clip-path:circle(32% at 88% 97%);
     clip-path:circle(32% at 88% 97%);
}
.circulo-cover-gris{
     height: 100%;
     width: 100%;
     background: linear-gradient(270deg, #EBEBEB 41.98%, #F9F9F9 100%);
     position: absolute;
     -webkit-clip-path: circle(51.3% at 82% 81%);
     clip-path: circle(51.3% at 82% 81%);
}

.circulo-cover-verde-delgado{
     height: 100%;
     width: 100%;
     background: linear-gradient(270deg, #17911b47 26.98%, #00a14b 100%);
     position: absolute;
     -webkit-clip-path: circle(52% at 82% 81%);
     clip-path: circle(52% at 82% 81%);
     opacity: .4;
}
/* md */
@media (max-width: 991px) {
     .circulo-cover-gris{
          -webkit-clip-path: circle(51.3% at 82% 91%);
         clip-path: circle(51.3% at 82% 91%);
     }
     .circulo-cover-verde-delgado{
         -webkit-clip-path: circle(52% at 82% 91%);
         clip-path: circle(52% at 82% 91%);
     }
     .cover-big-icon {
          bottom: -100px;
     }
}
/* xxl */
@media (min-width: 1870px) {
     .circulo-cover-verde {
          -webkit-clip-path:circle(27% at 88% 97%);
         clip-path:circle(27% at 88% 97%);
     }
     .circulo-cover-gris{
         -webkit-clip-path: circle(46.3% at 82% 81%);
         clip-path: circle(46.3% at 82% 81%);
     }
     .circulo-cover-verde-delgado{
         -webkit-clip-path: circle(46% at 82% 81%);
         clip-path: circle(46% at 82% 81%);
     }
}

.circle-spin {
     -webkit-transform: rotate(
          360deg);
              animation: rotation 20s linear infinite;
              -moz-animation: rotation 20s linear infinite;
              -webkit-animation: rotation 20s linear infinite;
              -o-animation: rotation 20s linear infinite;
}


section {
     padding-top: 50px;
     padding-bottom: 50px;
}
section.cover-main,
section.cover-int {
     padding-top: 0px;
     padding-bottom: 0px;
}
.section-sin-padding{
     padding-top: 0px !important;
     padding-bottom: 0px !important;
}

/* ===================================
    Texts lines
====================================== */
.v_line {
     border-left: 3px solid #00A14B;
     padding-left: 20px;
}

.text-special {font-size: 50px; line-height:26px}
/* ===================================
    Ellipses
====================================== */
.bg-ellipse-cover-top {
     -webkit-clip-path: ellipse(85% 75% at 50% 25%);
     clip-path: ellipse(85% 75% at 50% 25%);
 }
 .bg-ellipse-cover-bottom {
     -webkit-clip-path: ellipse(85% 75% at 50% 75%);
     clip-path: ellipse(85% 75% at 50% 75%)
 }

/* sm */ @media (max-width: 767px) {
     .bg-ellipse-cover-top {
          -webkit-clip-path: ellipse(115% 75% at 50% 25%);
          clip-path: ellipse(115% 75% at 50% 25%);
      }
      .bg-ellipse-cover-bottom {
          -webkit-clip-path: ellipse(115% 75% at 50% 75%);
          clip-path: ellipse(115% 75% at 50% 75%);
      }
 }

/* ===================================
    Modal téminos y solicitar
====================================== */

.ContentModal .modal-title {
    font-size: 20px;
    color: #4B4B4D;
}

.ContentModal p {
    font-size: 12px;
    margin-bottom: 1em;
    color: #878787;
    font-weight: 400;
}

.ContentModal ol {
    margin-bottom: 1em;
}

.modal-body span{
     color: #878787;
}

.modal-footer a:hover{
    color: #ffffff;
}
/* ===================================
    Swiper
====================================== */

.swiper {
     width: 100%;
}
.swiper-pagination-bullet-active {
     background-color: #00A14B;
}
.swiper-pagination {
     position: initial;
}


/* ===================================
    Texto seccion ¿Cómo funciona? (Factoraje cliente y proveedores)
====================================== */
.col-texto-circulo h5{
     color: #3C3C3C !important;
}

.circulo-funciona{
     min-width:85.3px;
     min-height:85.3px;
     border-radius:50%;
     position: relative;
     display: flex;
    justify-content: center;
    color: #FFFFFF;
    background: #00A14B;

}

.circulo-funciona span{
     position: absolute;
    top: 16px;
    font-family: Quicksand;
    font-weight: 500;
    font-size: 50px;
    font-style: normal;
    line-height: 50px;
}

/* ===================================
    Circulos proceso factoraje
====================================== */

.circulo-factoraje{
     width:120px;
     height:120px;
     position: relative;
     border-radius:50%;
     position: relative;
     margin: auto;
     display: flex;
    justify-content: center;
    fill: green;
    background: #FFFFFF;
     box-shadow: 0px 0px 21px rgba(0, 0, 0, 0.1);
}

.circulo-factoraje span{
     position: absolute;
    top: 10px;
    font-size: 20px !important;
    line-height: 50px !important;
}

.factoraje p{
     text-align: center;
}

.circulo-factoraje:hover{
     background: linear-gradient(180deg, #00A14B 0%, #1F742D 100%);;
     fill: white;
     box-shadow: 0px 0px 21px rgba(0, 0, 0, 0.1);
}


.circulo-factoraje svg{
     position: relative;
    left: -11%;
    top: -12px;
}


.col-circulo-numero{
     position: relative;
}

.img-gral-circulos{
     position: absolute;
    top: -12px;
    height: 109px;
}

.proceso-factoraje{
     display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.proceso-factoraje h6{
     font-size: 20px!important;
     /*line-height: 50px !important;*/
     margin: 5px !important;
     padding: 0px;
}

.proceso-factoraje p{
     line-height:145.6% !important;
}

.circulo-factoraje {
     position: relative;
}

.circulo-factoraje:after {
     content: "";
     position: absolute;
     width: 150px;
     top: 50%;
     left: 130px;
     border-bottom: 1.5px dashed #DADADA;;
}

.circulo-factoraje-ultimo:after {
     content: "";
     position: absolute;
     width: 150px;
     top: 50%;
     left: 130px;
     border-bottom: 0px dashed #DADADA;;
}


.tab-factoraje-style .nav-tabs {
    justify-content:  center;
    border: 0px solid #e5e5e5 !important;
}

.tab-factoraje-style .nav-tabs li {
    justify-content: center;
    align-items: center;
    display: flex !important;
}

.conoce-factoraje   .nav-tabs > li > a {
    border: none;
    line-height: 20px;
}

.conoce-factoraje   .nav-tabs > li > a.active {
    border-color: transparent;
    border: none;
    border-radius: 0;
    top: 1px;
    position: relative;
}

.conoce-factoraje   .nav-tabs > li > a.active span{
    color:  #09A242;
}

.conoce-factoraje   .nav-tabs > li > a > span{
     color: #A8A8A8;
}

.conoce-factoraje  .nav-tabs > li > a.active img{
     filter: opacity(0.5) drop-shadow(0 0 0 green);
}

.conoce-factoraje  .nav-tabs > li > a > img{
     filter: grayscale(1);
}

.que-es-factoraje-proveedores{
     background: #F8F8F8;
}
.que-es-factoraje-proveedores p{
     text-align: center;
}

.funciona-h4{
     text-align: center!important;
}

.como-funciona-factoraje-proveedores{
     position: relative;
}

@media screen and (max-width: 768px) {
     .circulo-factoraje:after {
          border-bottom: 0px dashed #DADADA;;
     }
}

/* ===================================
    Flecha factoraje
====================================== */

.text-arrow{
     width: 58%;
}
.text-arrow-2 {
     width: 98%;
}

.text-arrow h5{
     text-align: end;
}

.h-flecha {
  width:95%;
  position: relative;
  margin: 20px auto 0px auto;
  border: 1px dashed #F0CC00;

}

.arrow-left:after,
.arrow-right:before {
    content: "";
    position: absolute;
    width: 0px;
    height: 0px;
    border: 5px solid transparent;
}

/* horizontal arrows */
.arrow-left:after,
.arrow-right:before {
    top: -5px;
}

.arrow-left:after {
    left: -15px;
    border-right: 15px solid #F0CC00;
}
.arrow-right:before {
    right: -15px;
    border-left: 15px solid #F0CC00;
}



.que-es-factoraje{
     background: #F8F8F8;
}


/* ===================================
    Botones
====================================== */

.texto-boton{
  font-family: Poppins;
  font-style: normal;
  font-size: 14px;
  line-height: 25px;
  text-align: center;
  color: #FFFFFF;
}

.boton-gral{
  min-width: 170px;
  min-height: 39px;
  background: #00A14B;
  border-radius: 28px;
  padding: 5px 20px;
}

.boton-secundario{
    background-color: transparent;
    border:1px solid #00A14B;
}

.boton-secundario-modal{
    color: #00A14B;
    border:1px solid #00A14B;
    background-color: transparent;
}

.boton-secundario-modal:hover{
    color: #00A14B;
    background-color: #00A14B !important;
}

:where(.boton-gral, .boton-secundario):hover {
     color: #ffffff !important;
     background: #066e37 !important;
}

.botones-solicitud{
  text-align: center;
  position: relative;
  z-index: 1;
}

@media (min-width: 576px) {
    .form-control{
        font-size: 16px;
    }
}

/* ===================================
    Spinner
====================================== */
.spinner {
    display: inline-block;
    opacity: 0;
    width: 0;
    -webkit-transition: opacity 0.25s, width 0.25s;
    -moz-transition: opacity 0.25s, width 0.25s;
    -o-transition: opacity 0.25s, width 0.25s;
    transition: opacity 0.25s, width 0.25s;
}
.has-spinner.active .spinner {
    opacity: 1;
    width: auto;
}

.spinner i{
    color: white;

}

.noHover {
   pointer-events: none;
}
/* ===================================
    Background
====================================== */

.bg-puntos{
     position: relative;
     background: url("../../assets/img/textura_punto.png");
     background-repeat: repeat;
     z-index: 0;
}

.bg-grad-y-white-trans {
     background: rgb(255,255,255);
     background: -moz-linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
     background: -webkit-linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
     background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#ffffff",GradientType=1);
     height: 100%;
     width: 100%;
     z-index: -1;
}

.bg-grad-y-trans-white {
     background: rgb(255,255,255);
     background: -moz-linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
     background: -webkit-linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
     background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#ffffff",GradientType=1);
     height: 100%;
     width: 100%;
     z-index: -1;
}

.bg-grad-y-white-trans-white {
     background: rgb(255,255,255);
     background: -moz-linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,1) 100%);
     background: -webkit-linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,1) 100%);
     background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,1) 100%);
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#ffffff",GradientType=1);
     height: 100%;
     width: 100%;
     z-index: -1;
}

.cover-content {
    position: absolute;
    top: 0;
}

/* ===================================
    Footer
====================================== */

.footer-wrapper {
     display: flex;
     justify-content: center;
     align-items: center;
}

.footer-logo {
     display: flex;
     justify-content: center;
     align-items: center;
}

.footer-logo a img {
     /*padding-left: 20px;*/
     min-width: 100px;
}

.footer-logo .texto-slogan, .texto-slogan-gral {
     border-left: 2px solid #C3C3C3;
}

.footer-logo .texto-slogan p {
     font-size: 12px;
     color: #0E465A;
}

.footer-logo .texto-slogan-gral p {
     padding-top: 10px;
     padding-bottom: 10px;
     margin-left: 10px;
}

.bg_privacidad a{
     color: #ffff;
}
.bg_privacidad a:hover {
     color: #ffff;
     cursor: pointer;
}

.section-informacion ul {
    list-style: none !important;
  }
/* ===================================
    Valores
====================================== */
    .texto-camino p{
        padding: 5px 0px;
    }

/* ===================================
    Banner
====================================== */

.banner-row {
     display: flex;
    justify-content: center;
    align-items: center;
}

.banner-container {
    width: 95%;
    max-width: 1200px;
    background-color: #00A14B;;
    border-radius: 20px;
    position: relative;
    margin: auto;
}

.banner-inner {
     position: absolute;
     width: 50%;
     top: 0;
     right: 0;
     height: 100%;
     background-color: #ECECEC;
     /* clip-path: circle(100% at 100% 50%); */
     -webkit-clip-path: circle(90% at 100% 50%);
     border-radius: 20px;
     display: flex;
     justify-content: flex-end;
     align-items: center;
}

.banner-inner img {
     width: 70%;
     /*margin-right: 6%;*/
     padding-left: 10px;
}

.container-banner-img{
    position: absolute;
    width: 100%;
    right: -88px;
    bottom: -12px;
    display: flex;
    justify-content: center;
}

.boton-banner{
    background: #FFFFFF;
    border-radius: 28px;
    font-size: 14px;
    line-height: 25px;
    text-align: center;
    color: #09A242;
    /*width: 191px;*/
    border: 2px white solid;
    min-width: 170px;
    min-height: 39px;
    /* top: calc(50% - 39px/2 + 37.61px); */
}

.boton-banner:hover{
     color: #fff;
     background: transparent;
     border: 2px white solid;
}

.text-banner{
    font-family: Quicksand;
    font-weight: 500;
    font-size: 25px;
    color: white!important;
    line-height: 30px;
}

.div-img{
     display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

@media (max-width: 767.98px) {
     .proceso-factoraje{
          flex-direction: column;
     }
     .banner-inner{
          display: none;
     }

     .banner-container {
          display: flex;
          flex-direction:column;
          justify-content: center;
          align-items: center;
     }

     .banner-container p{
          align-items: center;
     }
     .text-banner{
          margin-right: 5%;
          text-align: center;
     }

     .container-feature-como-funciona{
          display: flex;
         width: 100%;
         justify-content: flex-end;
         align-items: center;
         margin: 0px;

         flex-direction: column;
     align-content: space-around;
     }

}

/* ===================================
    Formulario
====================================== */
.no-padding {padding:0 !important}{

}
.no-show {
     display: none;
     font-size: 13px !important;
}
.form-control-error {
     border: 2px solid #f9696e;
}

.form-msj-error{
     border-radius: 0.25rem;
     /*color: #495057;*/
     color: #2f3a3b;
     background-color: #f0cc01;
}

.uniform{
    background: rgb(14,70,90,1);
    color: white;
}

.errorCheckBox{
    box-shadow: 0px 0px 0px 1px rgb(255 0 0);
}

/* ===================================
    seccion sabemos
====================================== */

.seccion-sabemos{
    display: flex;
    max-height: 130px;
    padding: 0px 13px;
    align-items: baseline;
}
.seccion-texto{
     background: #F4F4F4;
     padding: 11px 15px 30px;
     border-radius: 10px;
}
.sin-padding{
     padding-left: 0px !important;
     padding-right: 0px !important;
}


/* ===================================
    Login
====================================== */
.card-login{
  height: 427px;
  margin-top: auto;
  margin-bottom: auto;
  width: 558px;
  background: #FFFFFF;
  box-shadow: 0px 2px 27px rgba(0, 0, 0, 0.15);
  border-radius: 20px;
  top: 90px;
}

.form-control-login{
  width: 100%;
  display: inline-block;
  background: #F3F3F3;
  border-radius: 5px;
  border: 1px solid #F3F3F3;
}

.curva-login{
  height: 55vh;
  left: 0;
  right: 0;
  bottom: 0px;
  z-index: -1;
}

.borde-superior-login{
    width: 85%;
    left: 7.5%;
    height: 3px;
    background-color: #F0CC00;
    top: 0px;
}

.bg-input {
    background-color: #F3F3F3 !important;
}

.bg-input img{
  max-width: 100%;
  height: 15px;
}

::-webkit-calendar-picker-indicator {
  opacity: 1;
  background-image: url("../../assets/img/icons/iconosLogIn/icono_campos_fechas-01.svg");
  cursor: pointer;
}

/* ===================================
    Imagenes
====================================== */

.img-gral-inicio{
    position: absolute;
    top: 10px;
    width: 73%;
    left: 32px;
    right: 0;
}

.img-gral{
     position: absolute;
     top: -1px;
     left: 16px;
}

.img-gral-msj{
     position: absolute;
     top: -3px;
     left: 13px;
}

.img-gral-izq {
    position: absolute;
    top: -15px;
    right: -15px;
  }

.row-ciculos:hover img {
    -webkit-transform: rotate(360deg);
    animation: rotation 3s linear;
    -moz-animation: rotation 3s linear;
    -webkit-animation: rotation 3s linear;
    -o-animation: rotation 3s linear;
  }

.texto-num{
     display: flex;
     flex-wrap: nowrap;
  }

.img-second {
     animation-name: img-second;
     animation-duration: 20s;
     animation-iteration-count: infinite;
}

@keyframes img-second {
     0% {-webkit-transform: rotate(5deg);}
     25% {-webkit-transform: rotate(-5deg);}
     50% {-webkit-transform: rotate(5deg);}
     75% {-webkit-transform: rotate(-5deg);}
     100% {-webkit-transform: rotate(5deg);}
}

/*Girar imagen*/
.girar-img{
    -webkit-transform: rotate(360deg);
    animation: rotation 60s linear infinite;
    -moz-animation: rotation 60s linear infinite;
    -webkit-animation: rotation 60s linear infinite;
    -o-animation: rotation 60s linear infinite;
  }
  @-webkit-keyframes rotation{
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}


/* ===================================
    Cintillo alert
====================================== */}

.band-alert {
    width: 100%;
    background-color: #F0CC00;
    font-size: 10px;
    color: #2E3A3B;
    text-align: left !important;
    padding: 10px 20px;
    display: none;
    line-height: normal;
    z-index: 1;
    position: relative;
}

.band-alert .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.band-alert .container .text-alert {
    width: 80%;
}
.band-alert button {
    background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
    font-size: 10px;
}
.band-alert button:hover {
    text-decoration: underline;
}
/* sm */
@media (max-width: 767px) {
    .band-alert .container {
        display:block;
        align-items: center;
        justify-content: space-between;
    }
    .band-alert .container .text-alert {
        width: 100%;
    }
    .band-alert .container .button-alert {
        text-align: center;
        margin-top: 5px;
    }
}