
.mt-0{
    margin-top: 0px;
}
.mb-0{
    margin-bottom: 0px;
}

.mt-1{
    margin-top: 0.25rem;
}

.mb-1{
    margin-bottom: 0.25rem;
}

.mt-2{
    margin-top: 0.5rem;
}
.mb-2{
    margin-bottom: 0.5rem;
}

.mt-3{
    margin-top: 1rem;
}
.mb-3{
    margin-bottom: 1rem;
}

.mt-15{
    margin-top: 20px;
}
.mt-20{
    margin-top: 20px;
}

.mt-25{
    margin-top: 25px;
}

.mt-30{
    margin-top: 30px;
}
.mt-40{
    margin-top: 40px;
}
.mt-46{
    margin-top: 46px;
}

.mt-48{
    margin-top: 48px;
}

.mt-100{
    margin-top: 100px;
}



.m-0{
    margin: 0 !important;
}

.pt-0{
    padding-top: 0px !important;
}

.pt-1{
    padding-top: 0.25rem;
}

.pt-2{
    padding-top: 0.5rem;
}

.pt-3{
    padding-top: 1rem;
}


.pb-20{
    padding-bottom: 20px;
}


.btn-lg{
    font-weight: 400;
}


.checked {
    background-color: #4D90FD;
    color: white;
}


.select_dishbox {
    padding: 10px;
    border: 1px solid gray;
    cursor: pointer;
    height: 60px;
    overflow: hidden;
    text-align: center;
}



.sidebar_logo{
    background: #fff;
    font-size: 2rem;
    padding-bottom: 2rem;
}

table .fas , table .fa{
    cursor: pointer;
}

textarea{
    max-width: 100%;
}


/* Login */
.login-container .header .logo-img{
    max-width: 50px;
}

/*AFTER IMG*/


    @media (max-width: 575.98px) { 
    .our-services:after {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        width: 0% !important;
        height: 100%;
        background-color: #fff;
        z-index: 0;
    }




}


.login-container .middle-login{
    top: 46%;
}



/* Barra de navegacion en seccion privada */
.dropdown-toggle img{
    height: 30px;
}

.navbar-nav>li>a{
    font-size: 14px;
}
.navbar-default .navbar-brand{
    background: none;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 70px;
}

.navbar-brand>img{
    height: 50px;
}


/* Sidbar en seccion privada */

#cl-wrapper .cl-sidebar .side-user .info,
#cl-wrapper .cl-sidebar .side-user .info span,
#cl-wrapper .cl-sidebar .side-user .info p{
    font-size: 1.5rem;
}

.cl-vnavigation li a .btn{
    text-shadow: none;
}

/* vista de generales / summary */
.stat-data .stat-number h2{
    min-width: 42px;
}
figure.menu-scrollable{
    max-height: 500px;
    overflow: hidden;
    overflow-y: auto;
}




/***************** LOADING *****************/
/* PANEL DEL CARGANDO / PROCESANDO */
#loading {
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    position: fixed;
    opacity: 0.7;
    background-color: #fff;
    z-index: 9999;
    text-align: center;
    display: none;
}

#loading-image {
    position: absolute;
    top: 35%;
    left: 45%;
    z-index: 100;
    color: rgb(37, 56, 138);
    font-size: 150px;
}








/***************** CAROUSEL *****************/
/* CELLPHONE / PROCESANDO */


@media (min-width: 992px){
.owl-carousel.custom-left-pos-1 {
    left: 150px;
    margin-top: -50px !important;
}
}
.h-36{
    height: 366px;
}


.owl-carousel.custom-background-1 {
    bottom: -15px;
    padding: 31.8% 6.8% 0;
}
.owl-carousel.custom-arrows-style-1 .owl-nav {
    left: 0;
    transform: translate3d(0, 0, 0);
}

.owl-carousel.custom-background-1:before {
    content: '';
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(/img/demos/smartphone.png);
    background-size: 100%;
    background-repeat: no-repeat;
}





/***************** Secciones Abajo *****************/
/* CELLPHONE / PROCESANDO */


    .download {
    width: 80%;
    height: 75px;
    background: #42A960;
    float: left;
    
    position: relative;
    color: #fff;
    cursor: pointer;
    border: 1px solid #fff;
    line-height: 20px;
  }
  
  .download > .fa {
    color: #fff;
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
  }
  
  .download-tag,
  .platform {
    position: absolute;
    left: 75px;
  }
  
  .download-tag {
    top: 15px;
    font-size: 12px
  }
  
  .platform {
    top: 35px;
    font-size: 19px;
  }
  
  .download:hover {
    
    background-color: #42A960;
  }




  



.container-layout-img-4 {
    padding: 0px;
}
.valign-middle {
    justify-content: center;
}
.valign-middle {
    display: flex;
    flex-direction: column;
}
.container-img {
    position: relative;
    flex: 1;
    max-width: 100%;
}


.image-fluid-app {
    height: 777px;
    margin: 0 auto 0 0;
}



.icon-feature {
    border-radius: 50%;
    height: 36px;
    width: 36px;
    min-width: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: -8px 0 0 10px;
}

.p-heading{
    font-size: 18px;
    font-weight: 600;
    color: #363f41;
    margin-bottom: 10px;
}

.p-description{
    font-size: 14px;
    line-height: 1.71;
    color: #363f41;
}
.feat-container{
    padding-top: 28px;
    
}


.feat-container{
    padding: 16px 20px 24px 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-bottom: 1px solid #f5f5f5;
}

.feat-text{
    padding-left: 26px;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.custom-box-details {
    padding: 35px !important;
    padding-bottom: 0px !important;
    z-index: 2;
}


.section-secondary-app{
    background-color: #F8F8F6 !important;
    border-color: #F8F8F6 !important;
}



.hojita-app {
    position: absolute;
    bottom: -50px;
    right: -119px;
    transform: scale(1.1);
}










.phone-app {
    height: 705px;
}


.phone-app {
    height: 705px;
    background: url(/img/demos/phone-frame.png);
    background-repeat: no-repeat;
    background-size: 100%;
}


.phone-app {
    position: relative;
    width: 100%;
    
}


.phone-app img, .phone-app video {
    left: 40px;
    top: 60px;
}


.phone-app img, .phone-app video {
    position: absolute;
    left: 42px;
    top: 40px;
    width: 58%;
    z-index: -1;
}

.card-80-top{
    

    margin-top: -80px;

}


.phone-container {
    width: 74%;
}
.phone-container {
    position: relative;
    top: 0;
    width: 100%;
    z-index: 2;
}
.secondary-phone-container{
    left: 45%;
}



.small-phone-container{
    
        left: 15%;
   
}


.phone-app-middle img, .phone-app-middle video {
    position: absolute;
    left: 27px;
    top: 32px;
    width: 58%;
    z-index: -1;
}





/*Testimonial section*/



  
.testimonial-section h1{
  text-align: center;
  color: #333;
  font-size: 24px;
}

.border{
  width: 100px;
  height: 3px;
  background: #333;
  margin: 40px auto;
}

.testimonial{
  background: #f1f1f1;
  padding: 40px;
  overflow: hidden;
  border-radius: 8px;
  cursor: pointer;
}

.test-info{
  display: flex;
  height: 60px;
  align-items: center;
}

.test-pic{
  width: 50px !important;
  border-radius: 50%;
  margin-right: 15px;
}

.test-name{
  font-size: 12px;
  color: #333;
}

.test-name span{
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #3498db;
}

.testimonial p{
  font-size: 12px;
  line-height: 22px;
  margin-top: 20px;
}

/* TABLAS */
#data_table img, table img{
    max-height: 100px !important;
    width: auto !important;
}


/*Download*/


@media (min-width: 1200px){
    .download-buttons {
        width: 20%;
    }
}

@media (min-width: 768px){
    .download-buttons {
        width: 20%;
    }
}


/*FAQS*/


h2.custom-bar._center {
    text-align: center;
}

.text-color-dark {
    color: #212529 !important;
}

.custom-bar {
    position: relative;
}

h2.custom-bar._center:after {
    left: 50%;
    transform: translateX(-50%);
}

h2.custom-bar:after {
    border-bottom-color: #42A960;
}
h2.custom-bar:after {
    content: '';
    display: block;
    position: absolute;
    bottom: -20px;
    width: 130px;
    border-bottom: 7px solid #42A960;
}


.custom-accordion-style-1 .card-header {
    background: transparent;
    margin: 0 !important;
}


.custom-accordion-style-1 .card-header .card-title {
    font-size: 13px;
    font-weight: 600;
}
.custom-accordion-style-1 .card-header .card-title a:not(.collapsed) {
    color: #42A960 !important;
    border-left-color: #42A960;
    background: #fff3f2;
}
.custom-accordion-style-1 .card-header .card-title a:not(.collapsed) {
    color: #42A960 !important;
    border-left: 2px solid #42A960;
    border-bottom: 1px solid #ddd;
    background: #E5F8EE;
}
.custom-accordion-style-1 .card-header .card-title a {
    position: relative;
    padding: 15px 50px 15px 35px;
    border-left: 2px solid transparent;
    transition: ease color 300ms, easne background 300ms;
}
.accordion .card-header a {
    color: #42A960;
}


.custom-accordion-style-1 .card-header .card-title a:not(.collapsed):after {
    border-color: #42A960 transparent transparent transparent;
}

.custom-accordion-style-1 .card-header .card-title a:not(.collapsed):after {
    border-color: #42A960 transparent transparent transparent;
    transform: translateY(-50%) rotate(0deg);
}

.custom-accordion-style-1 .card-header .card-title a:after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    right: 35px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #1e1e1e;
    transform: translateY(-50%) rotate(-90deg);
    transition: eanse transform 300ms;
}

.custom-accordion-style-1 .card-body {
    padding: 25px 35px;
}


.test-col {
    background: #70A938 !important;
  
}


.testimonial .testimonial-author strong{
    color: #FFF;
}

.btn-secondary{
    background-color: #E76117 !important;
    color: white !important;
}

.color-secondary{
    color: #E76117 !important;
}

/*Responsive*/


/* Extra small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px) { 


    .xs-pad-50{
        padding-top: 50px;
    }
    .xs-mt-50{
        margin-top: 50px;
    }
    

    .download{
        width: 80%;
        height: 75px;        
        margin-left: auto;
        margin-right: auto;
        float: none;
        margin-bottom: 35px;
    
    }

    #header.header-floating-icons .header-nav-main nav > ul{
        display: block !important;
        padding: 0;
    }


    #header .header-nav-main{
        left: 90%;
    }

    #header.header-floating-icons .header-nav-main {
        position: fixed;
        right: 0px;
        top: 144px;        
        overflow: hidden;
    }

    .no-section-pad{
        padding: 15px 0px !important;
    }

    .feat-container{
        display: block;
    }

    .card-80-top {
        margin-top: 0px;
    }
    


    .icon-feature{
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 30px;
        margin-top: 30px;
    }

    .hojita-app {
        position: absolute;
        bottom: -141px;
        right: -27px;
        transform: scale(0.9);
    }


    .phone-app {
        
        margin-left: 55px;
    }

    .xs-phone-app{
        margin-left: -22px !important;
    }


    .xs-secondary-phone-container {
        left: 22%;
    }

    .test-col {
        background: #70A938 !important;
      
    }


    .phone-app img, .phone-app video {
        position: absolute;
        left: 30px;
        top: 32px;
        width: 58%;
        z-index: -1;
    }


    .download-buttons{
        margin-bottom: 38px;
    }

    .xs-mat-30{
        margin-top: 30px;
    }
    .xs-mab-30{
        margin-bottom: 30px;
    }
    .xs-may-30{
        margin-top: 30px;
        margin-bottom: 30px ;
    }

    .xs-auto-centered{
        margin-left: auto;
        margin-right: auto;
    }

    .xs-main{
        padding-top: 100px;
    }
    



}


