/**************************************************************************************
*todo: Estilos generales del proyecto.
* El orden de este archivo css es el siguiente:
* Indice:
    1. Body
    2. Fuentes
    3. Colores
    4. Botones
    5. Iconos
    6. Inputs
    7. Air Datepicker
    8. Alignments
    9. Number Picker
    10. Chat
    11. Swiper Slider
    12. Slick Carousel

*   Bootstrap Grid and Breakpoints:

        Extra small     < 576px      ===>  Max container width:  None (auto)    ==>   .col-
        Small           ≥ 576px      ===>  Max container width:  540px          ==>   .col-sm-
        Medium          ≥ 768px      ===>  Max container width:  720px	       ==>   .col-md-
        Large           ≥ 992px      ===>  Max container width:  960px          ==>   .col-lg-
        Extra large     ≥ 1200px     ===>  Max container width:  1140px         ==>   .col-xl-


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


/*******************************************
** TODO: 1. BODY config body
*******************************************/

body{
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 0;
}
h1, h2, h3, h4, h5, h6, p, span{
    font-family: 'Montserrat', sans-serif;
}

/*******************************************
** TODO: 2. FUENTES peso, decoradores
*******************************************/
 /* 12pt = 1rem */
 /* 20pt = 1.6rem */
 /* 14pt = 1.2rem */

/**todo: tamanios ******/
.text-large{
    font-size: 1.2rem;
}
.text-regular{
    font-size: 1rem;
}
.text-small{
    font-size: 0.75rem;
}


/**todo: pesos ******/
.font-light{
    font-weight: 300;
}
.font-regular{
    font-weight: 400;
}
.font-medium{
    font-weight: 500;
}
.font-semi-bold{
    font-weight: 600;
}
.font-bold{
    font-weight: 700;
}
.font-extra-bold{
    font-weight: 800;
}
.font-black{
    font-weight: 900;
}
/**todo: decoradores ******/
.uppercase{
    text-transform: uppercase;
}
.lowercase{
    text-transform: lowercase;
}
.capitalize{
    text-transform: capitalize;
}




/*******************************************
** TODO: 3. COLORES para  background, fuentes
*******************************************/

/**todo: FUENTES ******/
    /* estandar */
.text-white {
    color: #ffffff !important;
}
.text-black {
    color: #000000;
}

    /* azules */
.text-blue-xtra-dark {
    color: #00003d;
}
.text-blue-dark {
    color: #003383;
}
.text-blue-normal {
    color: #0066cc;
}
.text-blue-light {
    color: #4bb8ef;
}

.text-blue-xtra-light {
    color: #99e2ff;
}

/**todo: BACKGROUND ******/

    /* azules */
.bg-blue-xtra-dark {
    background-color: #00003d;
}
.bg-blue-dark {
    background-color: #003383;
}
.bg-blue-normal {
    background-color: #0066cc;
}
.bg-blue-light {
    background-color: #4bb8ef;
}

.bg-blue-xtra-light {
    background-color: #99e2ff;
}

    /* blancos */
.bg-white-dark {
    background-color: #f7f8f8;
}
    /* grises */
.bg-gray-xtra-light {
    background-color: #cccccc;
}
.bg-gray-light {
    background-color: #bbbcbf;
}
.bg-gray {
    background-color: #a6a8aa;
}
.bg-gray-dark {
    background-color: #929496;
}
.bg-gray-xtra-dark {
    background-color: #808183;
}

    /* negros */
.bg-black-light {
    background-color: #666666;
}
.bg-black {
    background-color: #333333;
}
.bg-black-dark {
    background-color: #1a1a1a;
}





/*******************************************
** TODO 4. BOTONES:
********************************************/
.btn:focus{
    border-color: transparent;
    -webkit-box-shadow: none;
    box-shadow: none;
}

/*boton primario*/
.btn-main-blue{
    color: white;
    font-size: 14px;
    font-weight: 500;
    padding: 10px 74px;
    border-radius: 0;
    background-color: #003383;
}
.btn-main-blue:hover{
    color: white;
    background-color: #003aa0;
}

/*boton secundario*/
.btn-secondary-blue{
    color: white;
    font-size: 12px;
    border-radius: 0;
    background-color: #0066cc;
}
.btn-secondary-blue:hover{
    color: white;
    background: rgb(33, 112, 240) radial-gradient(circle, transparent 1%, rgba(33, 109, 223, 0.94) 1%) center/15000%;
}


/* Ripple effect */

/* Ripple effect redondo*/
.ripple-round{
    border-radius: 50%;
}


/* ripple effect para btn-secondary*/
.ripple-main {
    background-position: center;
    transition: background 0.8s;
}
.ripple-main:active {
    background-color: rgba(0, 64, 175, 0.96);
    background-size: 100%;
    transition: background 0s;
}


/* ripple effect para btn-secondary*/
.ripple-second {
    background-position: center;
    transition: background 0.8s;
}
.ripple-second:active {
    background-color: rgba(0, 109, 209, 0.85);
    background-size: 100%;
    transition: background 0s;
}

/* Ripple effect transparente*/
.ripple-transparent {
    background-position: center;
    transition: background 0.8s;
}
.ripple-transparent:hover {
    background: rgba(71, 167, 245, 0.13) radial-gradient(circle, transparent 1%, rgba(71, 167, 245, 0.17) 1%) center/15000%;
}
.ripple-transparent:active {
    background-color: rgba(110, 185, 247, 0.07);
    background-size: 100%;
    transition: background 0s;
}


/*******************************************
** TODO 5. ICONOS: tamanios, colores...
********************************************/
.icon-menu{
    width: 50px;
    height: auto;
    cursor: pointer;
}

.icon-menu-bar{
    width:  43px;
    height: 43px;
}
.menu-action{
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-right: 1rem;
    cursor: pointer;
}


/*******************************************
** TODO 6. Inputs:
********************************************/
.form-control:focus{
    border-color: transparent;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.form-control{
    padding: 0.4rem 1.2rem;
    border-radius: 0;
    border: none;
}


/*******************************************
** TODO 7. Range Datepicker:
********************************************/
/*famili font datepicker*/
.daterangepicker{
    border-radius: 0;
    font-family: 'Montserrat', sans-serif;
}

.daterangepicker .calendar-table .table-condensed thead tr th{
    color: #003aa0;
    text-transform: uppercase;
    font-weight: 500;
}

.daterangepicker td.active, .daterangepicker td.active:hover{
    background-color: #4bb8ef;
}
.daterangepicker td.in-range{
    background-color: #5cc4ef70;
}
.daterangepicker td.active, .daterangepicker td.active:hover{
    background-color: #4bb8ef;
}


/*******************************************
** TODO 8. Alignments
********************************************/
.text-center{
    text-align: center;
}
.text-left{
    text-align: left;
}
.text-right{
    text-align: right;
}


/*******************************************
** TODO 9. Number Picker
********************************************/
.input-group .input-group-prepend .btn-decrement, .input-group .input-group-append .btn-increment{
    color: #ffffff;
    border-radius: 0 !important;
    border-color: #2283c5 !important;;
    background: #2283c5 !important;
}
.input-group .input-group-prepend .btn-decrement:hover, .input-group .input-group-append .btn-increment:hover{
    border-color: #2178b8 !important;;
    background: #2178b8 !important;
}


/*******************************************
** TODO 10. Chat
********************************************/
#lc_chat_layout *{
    font-family: "Montserrat", sans-serif;
}
#lc_chat_layout #lc_chat_header {
    color: #FFFFFF !important;
    background-color: #003383 !important;
}

#lc_chat_layout #lc_chat_container{
    text-align: left !important;
}

#lc_chat_layout #lc_chat_container .lc-form-field-wrap .lc-textfield-wrap label{
    right: auto !important;
    left:10px !important;
}

#lc_chat_layout #lc_chat_container .lc-form-field-wrap .lc-textfield-wrap input, #lc_chat_layout #lc_chat_container .lc-form-field-wrap .lc-textfield-wrap .lc-select, #lc_chat_layout #lc_chat_container .lc-form-field-wrap .lc-textfield-wrap textarea, #lc_chat_layout #lc_chat_container #lc_chat_input_container{
    text-align: left !important;
    direction: ltr !important;
}



/*******************************************
** TODO 11. Swiper Slider
********************************************/
.swiper-pagination-bullet-active{
    background: #ffffffa6 !important;
}



/********************************************
/** TODO 12. Slick Carousel
********************************************/
.slick-initialized .slick-slide{
    position: relative;
}
.slick-arrow{
    position: absolute;
    top: 50%;
    background: transparent;
    border: none;
}

.slick-prev {
    left: 0;
}

.slick-next {
    right: 0;
}