@font-face {
    font-family: nunito;
    src: url(font/Nunito-Light.ttf);
}

body {
    font-family: nunito !important;
}


/**
 * @Description: Documento de estilos generales de la plataforma
 */

/**
 **  LogIn  **
 **/
.css-login-page{
    filter:brightness(1);
}

.messageErrorLogIn{
    color: #DB2164;
}
.css-login-text-into-data{
    padding: 25px;
    color: #0f0a27;
}
.css-btn-login-into{
    padding: 8px 45px;
    background-color: #22A6B3;
    color: #FFF;
    border-radius: 45px;
}

/***  Formularios (Card-Body)  ***/
.cardBodyFrmCategoryCreate{
    padding-top: 47px!important;
}

.tiempo-input,.opcion-telefono-input{
    width: 50%;
}


/*
Esto modifica la estructura del framework de diseño para que se ajuste al 100% de la pantalla, y omitir el sidebar
*/
.main-panel-custom {
    position: relative;
    float: right;
    /*width: calc(100% - 260px);*/
    width: 100% !important;
    transition: 0.33s, cubic-bezier(0.685, 0.0473, 0.346, 1);
}


/*
Esto modifica la estructura del framework de diseño para que se ajuste a un diseño sin menu superior
*/
.main-panel-custom>.content {
    margin-top: 0px !important;
    padding: 30px 15px;
    min-height: calc(100vh - 123px);
}

.logo-all-pages{
    margin-top: 15px;
}

.item{
    cursor: pointer;
    -moz-cursor:pointer;
    -webkit-cursor:pointer;
}

.div-help{
    display: none;
}

.card-dashboard img{
    width: 100%;
}

.card-dashboard-subtitle{
    color: black;
    text-decoration: none;
    font-size: 1.1em;
}

.elementHide-ocult{
    display: none;!important;
}
.elementHide{
    display: none;!important;
}

.seleccionado, .seleccionadoRemove{
    background: #9C27B0;
    color: white;
    border-radius: 50px;
    border: 2px solid #9C27B0;
    margin: 10px;
}
.seleccionado:hover, .seleccionadoRemove:hover{
    border: 2px solid #9C27B0;
    margin: 10px;

}

.contenedor_prioridad{
    display: block;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #E5E5E5;
    border-radius: 10px;
}
.contenedor_extension_sin_cola{
    display: block;
    padding-right: 15px;
    margin: 10px;
    border: 1px solid #E5E5E5;
    border-radius: 10px;
}
.extension{
    background: #1DC0D4;
    color: white;
    border-radius: 50px;
    margin: 10px;

}

.drag_focus{
    background: #9C27B0;
    color: white;
    border-radius: 50px;
}

.paginationButton{
    color: #ffffff!important;
}

.lista{

    list-style:none
}

.contenedor_direcciones{

}

.contenedor_pedido{
    max-height: 400px;
    overflow: auto;
}

.img-pedido{
    width: 100%;
}

.sin_margen{
    margin: 0!important;
}

.sin_padding{
    padding: 0!important;
}

.contenedor_productos{
    width: 100%;
    max-height: 500px;
}
.contenedor_productos>.row>.col-md-5{
    margin-right: 15px;

}


.contenedor_resumen{

    background: white;
}

.siguiente_direccion{
    z-index: 100000;
    display: inline-block;
    right: -100%;

}


.indicadores_carousel{
    color: #ccc;
}


.arrows_action{
    position: relative;
    bottom: -90px;
}


@media screen and (max-width: 768px) {
    .arrows_action{
        bottom: 0;
    }
}

.puntero{
    cursor:pointer;
}

.arrows> span{
    float: right;
    width: 50%;

}
.penalizacion-img{
    width: 5%;
    position: relative;
    top: -5px;
}


.corregir_bottom{
    position: relative;
    bottom: 4.9px;
}
.margin-card{
    padding: 0px;
    margin-top: 0px;
    margin-bottom:10px;
    display: inline-block;
    width: 150%;
}

.margin-card-left{
    margin-right: 4%;

}

.margin-card> .card-body{
    padding: 10px;
}
.margin-card> .card-footer{
    padding: 2px;
    margin: 0px;
}
.carousel-control-prev,.carousel-control-next{
    width: 5%;
}
.indicador_direcc_left,.indicador_direcc_right{
    position: relative;
    top: -20%;
}

.indicador_direcc_left{
    left: -25%;
}
.indicador_direcc_right{
    right: -25%;;
}


.direccion_card> .card{
    margin: 0;
}
.direccion_card> .card> .card-body{
    margin:0px;
    padding: 10px;
    display: inline-block;
}

@media screen and (max-width: 991px) {
    .direccion_card> .card{

        display: block;
    }
    .direccion_card> .card> .card-body{
        display: inline;
        position: relative;
        padding: 10px;
        margin: 0px;
        height: 50%;
    }
}


/*------------------------CARDS DE DIRECCION DE PEDIDOS----------------------------------*/

@media screen and (min-width: 768px) {
    .carousel-inner .active,
    .carousel-inner .active+.carousel-item {
        display: block;
    }
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left)+.carousel-item {
        -webkit-transition: none;
        transition: none;
    }
    .carousel-inner .carousel-item-next,
    .carousel-inner .carousel-item-prev {
        position: relative;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    .carousel-inner .active.carousel-item+.carousel-item+.carousel-item+.carousel-item {
        position: absolute;
        top: 0;
        right: -50%;
        z-index: -1;
        display: block;
        visibility: visible;
    }
    /* left or forward direction */
    .active.carousel-item-left+.carousel-item-next.carousel-item-left,
    .carousel-item-next.carousel-item-left+.carousel-item {
        position: relative;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
    /* farthest right hidden item must be abso position for animations */
    .carousel-inner .carousel-item-prev.carousel-item-right {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        display: block;
        visibility: visible;
    }
    /* right or prev direction */
    .active.carousel-item-right+.carousel-item-prev.carousel-item-right,
    .carousel-item-prev.carousel-item-right+.carousel-item {
        position: relative;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
        visibility: visible;
    }
}

/* Desktop and up */
/*indicador_direcc_left*/
@media screen and (min-width: 992px) {


    .carousel-inner .active,
    .carousel-inner .active+.carousel-item,
    .carousel-inner .active+.carousel-item+.carousel-item {
        display: block;
    }
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left)+.carousel-item,
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left)+.carousel-item+.carousel-item {
        -webkit-transition: none;
        transition: none;
    }
    .carousel-inner .carousel-item-next,
    .carousel-inner .carousel-item-prev {
        position: relative;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    .carousel-inner .active.carousel-item+.carousel-item+.carousel-item+.carousel-item {
        position: absolute;
        top: 0;
        right: -33.3333%;
        z-index: -1;
        display: block;
        visibility: visible;
    }
    /* left or forward direction */
    .active.carousel-item-left+.carousel-item-next.carousel-item-left,
    .carousel-item-next.carousel-item-left+.carousel-item,
    .carousel-item-next.carousel-item-left+.carousel-item+.carousel-item,
    .carousel-item-next.carousel-item-left+.carousel-item+.carousel-item+.carousel-item {
        position: relative;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
    /* farthest right hidden item must be abso position for animations */
    .carousel-inner .carousel-item-prev.carousel-item-right {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        display: block;
        visibility: visible;
    }
    /* right or prev direction */
    .active.carousel-item-right+.carousel-item-prev.carousel-item-right,
    .carousel-item-prev.carousel-item-right+.carousel-item,
    .carousel-item-prev.carousel-item-right+.carousel-item+.carousel-item,
    .carousel-item-prev.carousel-item-right+.carousel-item+.carousel-item+.carousel-item {
        position: relative;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
        visibility: visible;
    }




}

/*--------------------------------------------------------------------------------------------*/
/*AUDIOS IVR*/
.dia_Selec{
    color: green;

}

.check_dia{
    opacity: 0.3;
}
.icono_tag{
    color:#cccccc;
    font-size: 10px;

}
/*/*---------------------------------------------------------INTERFACE DE PRODUCTOS-----------------------------------*/
.img-producto{
    width: 100%;
    margin:0;
    padding: 0;
}

.td-img{
    width: 10%;
}

.contenedor_imgProductos{
    width: 100%;
    height: 180px;
    border: 1px solid #8c8c8c;

}
.eliminar_img{
    position: relative;
    bottom: -40px;
    right: -87%;

}



/******************************************************************INTERFACE IVR***********************************************/

.pestanas {
    float:left;
    width:100%;
    line-height:normal;
    font-size: 16px;
    font-weight: bold;

}
.pestanas ul {
    margin:0;
    padding:0;
    list-style:none;
}
.pestanas li {
    float:left;
    margin:0 0 0 3px;
    padding:0;
    background: #9C27B0;

}
.pestanas span {
    display:block;

    padding:3px 10px 3px 10px;
    color: #fff;
    text-decoration: none;
}

.add-ivr-icon{
    height: 31px;
}

.pestanas .li-add {
    position: relative;
    top: -6px;
}
.pestanas .li-add input{
    background: white;
    height: 31px;
}
.nombre-ivr-input-edit{
    background: white;
    height: 31px;
}


.seleccionado_ivr span{
    color:black;
}
.fecha_inicio_ex, .fecha_final_ex{
    width: 200px;
}

.type_time{
    width: 100px;
}

/*elimino la x de input file, libreria, la x venia por defecto*/
.file-preview .fileinput-remove{display: none}
/*para ocultar la barra de progreso de subida de archivos*/
.progress{display: none}

/*se cambia el tamaño del dropdel input file*/
.JSfileinput .contenedor_file .file-input-ajax-new{
    border-radius: 5px;
    padding: 8px;
    width: 100%;
    margin-bottom: 5px;

}
.JSfileinput .file-preview{
    height: 230px;
    width: 330px;
}
.JSfileinput .file-drop-zone{
    height: 200px;
}
.JSfileinput .file-drop-zone-title{
    position: relative;
    top: -10%;
}
/*fin de input file*/
.JScriterio{
    position: relative;
    bottom:3px;
}
/*se oculta la informacion de el input file, esto es el peso del archivo*/
.file-size-info,.file-caption-info,.file-upload-indicator .fa-plus-circle{opacity: 0}

/*se agrega fondo claro al los ivr detalles diferentes opciones*/
.fondo_claro{

}
.fondo_oscuro{
    background: #f9f9f9!important;
}
/**************************************EFECTO ONDA EN UN ELEMENTO*************************************/


/********************************************************************************************/

/*boton desactivado cursor*/
[disabled='disabled']{
    cursor: not-allowed;
}


.resaltar_contenedor{
    transition: 1s ease-in-out;

    -webkit-box-shadow:1.5px 1.5px 1.5px 1.5px #BBBBBC;
    -moz-box-shadow:1.5px  1.5px 1.5px 1.5px #BBBBBC;
    box-shadow:1.5px 1.5px 1.5px 1.5px #BBBBBC;
    box-shadow:1.5px 1.5px 1.5px 1.5px #BBBBBC;
}

.image-producto {
    position: absolute;
    margin: 0;
    display:inline;
    right: 10%;
    bottom: 80%;
    border-radius: 100px;
    transition: transform 1s;

}

.image-producto:hover{
    transform: rotate(180deg);
    transform: scale(1.4);
    transform: scale(1.4);
}


.ico-user-create{
    width: 25px;
    position: relative;
    bottom: -2px;
}

.contenedor_productos_agregar{
    max-height: 350px;
    overflow: auto;
}

.selec{
    position: relative;
    bottom: -6px;
}


.contenedor_import{
    width: 100%;
    height: 500px;
    overflow: auto;
}

.js-contenedorBarrios{
    max-height: 80px;
    overflow: auto;
}


.table-productos{
    display: none;
}

.contenedor_productos_pedidos{
    overflow: auto;
}
.icons{
    font-size: 16px;

}

/*Estilos para la interfaz de PLAN*/
.css-plan-li-destinations{
    border-top: solid 0.1px #F0F0F0;
    border-bottom: solid 0.1px #F0F0F0;
    padding-left: 0;
    padding-right: 0;
}
.css-plan-li-destinations td{

}
.css-plan-arrow-selection{
    float: right;
    cursor: pointer;
}
.css-plan-price{
    width: 100px;
}
.css-plan-destination-search{
    margin-bottom: 5px!important;
    /*margin-left: 40px;*/
    width: 20rem;
}

.sigueme_destino,.sigueme_tiempo_extension{
    margin-top:2px;
}


/*Estilos para el reporte de 'Llamadas'*/
.css-align-with-select{
    padding-top: 33px;
    padding-bottom: 19px;
}
.css-icon-call-report-order-fields{
    background-color: #61A5B2;
    color: #FFF;
    padding: 0 2px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 15px!important;
    font-weight: bold;
}
.css-call-icon-rotate-icon-order-asc{
    transform: rotate(270deg);
}
.css-call-icon-rotate-icon-order-desc{
    transform: rotate(90deg);
}

/* Estilo para efecto 'Zoom' al pasar el cursor */
.css-img-zoom-efect img {
    -webkit-transition:all 0.3s ease;
    -moz-transition:all 0.3s ease;
    -o-transition:all 0.3s ease;
    -ms-transition:all 0.3s ease;
    width:100%;
}
.css-img-zoom-efect:hover img {
    -webkit-transform:scale(1.1);
    -moz-transform:scale(1.1);
    -ms-transform:scale(1.1);
    -o-transform:scale(1.1);
    transform:scale(1.1);
    transform-origin: bottom center;
}

/*Estilos para los tipos de cursores*/
.css-cursor-not-allowed{
    cursor: not-allowed!important;
}
.css-cursor-pointer{
    cursor: pointer!important;
}
.css-cursor-help{
    cursor: help!important;
}
.css-cursor-e-resize{
    cursor: e-resize!important;
}

/*Estilos para el '<div>' general que abarca el 'Contenido' de toodo documento y vista*/
.css-general-content-dashboard{
    padding: 0 15px !important;
}

/* Estilo para efecto 'Zoom' al pasar el cursor por 'EXTENSIONES' (Panel Operador) */
.css-extension-zomm-efect{
    -webkit-transition:all 0.3s ease;
    -moz-transition:all 0.3s ease;
    -o-transition:all 0.3s ease;
    -ms-transition:all 0.3s ease;
    width:100%;
}
.css-extension-zomm-efect:hover{
    -webkit-transform:scale(1.03);
    -moz-transform:scale(1.03);
    -ms-transform:scale(1.03);
    -o-transform:scale(1.03);
    transform:scale(1.03);
    transform-origin: bottom center;
}




/*****/
.select_diseno{
    position: relative;
    bottom: 5.7px;
}

.select_diseno_1{
    position: relative;
    bottom: 5.7px;
}
.select_diseno_3{
    position: relative;
    bottom: 14px!important;
}


.real-card-header-primary{
    background: #61a5b2!important;
}
.real-btn-primary{
    background: #808183!important;;
}

.real-text-primary{
    color:#61a5b2!important;;
}

/*Estilos para el CAPTCHA*/
.css-captcha-div{
    display: grid!important;
    justify-content: center!important;
}


.loader-page-login {
    position: fixed;
    z-index: 25000;
    background: rgb(255, 255, 255);
    left: 0px;
    top: 0px;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:all .3s ease;
}
.loader-page-login::before {
    content: "";
    position: absolute;
    border: 2px solid rgb(50, 150, 176);
    width: 200px;
    height: 200px;
    border-radius: 50%;
    box-sizing: border-box;
    border-left: 2px solid rgba(50, 150, 176,0);
    border-top: 2px solid rgba(50, 150, 176,0);
    animation: rotarload 1s linear infinite;
    transform: rotate(0deg);
}
@keyframes rotarload {
    0%   {transform: rotate(0deg)}
    100% {transform: rotate(360deg)}
}
.loader-page-login::after {
    content: "";
    position: absolute;
    border: 2px solid rgba(50, 150, 176,.5);
    width: 200px;
    height: 200px;
    border-radius: 50%;
    box-sizing: border-box;
    border-left: 2px solid rgba(50, 150, 176, 0);
    border-top: 2px solid rgba(50, 150, 176, 0);
    animation: rotarload 1s ease-out infinite;
    transform: rotate(0deg);
}

.title_information{
    font-size: 15px!important;
}
.css-alignment-icons{
    vertical-align: middle!important;
}


.modal_header_primary{
    background: #61A5B2;color: #FFFFFF;font-weight: bold!important;
}

.margin_btn_back{
    margin-bottom: 15px;
}

.Zebra_Tooltip_Message{
    line-height: 1.5em !important;
    background: #000 !important;
    border: none !important;
    border-radius: 3px !important;
    box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2) !important;
    color: #ffffff !important;
    padding: 5px 15px !important;
    font-size: 14px!important;
}

.css-align_input_with_select{
    margin-top: 8px!important;
}

.css-bold-text{
    font-weight: bold!important;
}

.css-ul-plan-containers{
    height: 500px;
    overflow-y: auto;
}

.css-selected-item-plan-destine{
    background: dodgerblue;
    color: #ffffff;
    font-weight: bold;
}

.css-plan-span-cost{
    vertical-align: top;
}

.css-font-weight-bold{
    font-weight: bold!important;
}

.css-plan-span-destine-name{
    display: inline-block;
    width: 160px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*.css-import-preview-data-table{
    overflow-y: auto!important;
    height: 300px!important;
}
.css-import-preview-data-table thead th{
    position: sticky!important;
    top: 0!important;
}
.css-import-preview-data-table table{
    border-collapse: collapse!important;
    width: 100%!important;
}*/

.css-btn-webrtc{
    display:block;
    width:70px;
    height:70px;
    color:#fff;
    position:fixed;
    right:20px;
    bottom:20px;
    border-radius:50%;
    line-height:80px;
    text-align:center;
    z-index:999;
}

/*Estilos para los íconos de 'ESTADÍSTICAS'*/
.css-dashboard-filter-inputs{
    border: 1px black solid;
    padding: 7px;
}
.css-dashboard-filter-select > button{
    border: 1px black solid;
    padding: 10px!important;
    margin-top: 2px!important;
}

.css-not-margin-button{
    margin-bottom: 0!important;
}
.css-not-padding-bottom{
    padding-bottom: 0!important;
}
.css-capitalize-word{
    text-transform:capitalize!important;
}
.css-vertical-align-bottom{
    vertical-align: bottom!important;
}