/******************************************************************************* 
Created on : 31/01/2020, 00:00:00
Author     : ING ANDRES CHILIQUINGA
*******************************************************************************/

root { 
    display: block;
}

html, body{
    direction:ltr;
    font-family             : 'Tahoma',sans-serif !important;
    font-size               : 11px !important;
    color                   : rgb(119, 121, 126) !important; 
    padding                 : 0px;   
    background-color        : #ffffff; /*#1f64cc;*/
    background-size         : 100% 100%;
    background-attachment   : fixed;
}

.main-container{
    position        : absolute; 
    background-color: #f8f9f9;
    width           : 100%;
    height          : 100%;
    overflow        : hidden;
}

.container{
    width       : 100% !important;
    height      : 100% !important;
    max-width   : 100% !important;
    min-width   : 100% !important;
    padding     : 10px !important;
    overflow    : hidden;
}

.contend{
    width         : 100% !important;
    height        : 90% !important;
    max-width     : 100% !important;
    min-width     : 100% !important;
    padding       : 15px !important;
    background    : #ffffff; 
    overflow      : hidden;
    border-radius : 10px !important;  
}

.offcanvas {
    --bs-offcanvas-width: 300px !important;
}

.accordion-mnu {
    --bs-accordion-color                    : #212529 !important;
    --bs-accordion-transition               : color 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out,border-radius 0.15s ease;
    --bs-accordion-btn-padding-x            : 1.25rem;
    --bs-accordion-btn-padding-y            : 1rem;
    --bs-accordion-btn-color                : #9ea0a2 !important;
    --bs-accordion-btn-icon                 : url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%239ea0a2'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --bs-accordion-btn-icon-width           : 1.25rem;
    --bs-accordion-btn-icon-transform       : rotate(-180deg);
    --bs-accordion-btn-icon-transition      : transform 0.2s ease-in-out;
    --bs-accordion-btn-active-icon          : url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%239ea0a2'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --bs-accordion-btn-focus-border-color   : #212529;
    --bs-accordion-btn-focus-box-shadow     : 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    --bs-accordion-body-padding-x           : 1.25rem;
    --bs-accordion-body-padding-y           : 1rem;
    --bs-accordion-active-color             : #f5f6f6 !important;
}

.card-shadow {
    position        : relative;
    display         : flex;
    flex-direction  : column;
    min-width       : 0;
    word-wrap       : break-word;
    background-color: #fff;
    background-clip : border-box;
    border          : 0px solid transparent;
    border-radius   : 10px !important;  
    box-shadow      : 7px 7px 12px 0 rgba(20, 20, 20, 0.3);
}

.load {
    /*Div que ocupa toda la pantalla*/
    display         : none; /* Hidden by default */
    position        : fixed;
    top             : 0px;
    left            : 0px;
    bottom          : 0px;
    right           : 0px;
    width           : 100%;
    height          : 100%;
    background-color: #FFF;
    filter          : alpha(opacity=60); /*IE*/
    -moz-opacity    : 0.5;
    opacity         : 0.5; /*FireFox Opera*/
    z-index         : 2000;
}

.row-margin{
    margin-top  : 0.5rem !important; 
}

.col-margin{
    margin  : 1rem !important; 
}

.btn-blue {
    border-radius: .50rem !important;
    border: 1px solid #2771f2;
    color: white;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 10px;
    background-color: #2771f2; /* Color base del botón */
    transition: box-shadow 0.3s ease-in-out; /* Transición suave del efecto de sombra */
    width: 100px;
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
    0 2px 2px 0 rgba(0, 0, 0, 0.14),
    0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

.btn-blue:hover {
    background-color: #1964e6; /* Color base del botón */
}


.btn-gray {
    border-radius: .50rem !important;
    border: 1px solid #a1a3a8;
    color: white;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 10px;
    background-color: #a1a3a8; /* Color base del botón */
    transition: box-shadow 0.3s ease-in-out; /* Transición suave del efecto de sombra */
    width: 100px;
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
    0 2px 2px 0 rgba(0, 0, 0, 0.14),
    0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

.btn-gray:hover {
    background-color: #797c81; /* Color base del botón */
}

.btn-cian {
    border-radius: .50rem !important;
    border: 1px solid #14ccf1;
    color: white;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 10px;
    background-color: #14ccf1; /* Color base del botón */
    transition: box-shadow 0.3s ease-in-out; /* Transición suave del efecto de sombra */
    width: 100px;
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
    0 2px 2px 0 rgba(0, 0, 0, 0.14),
    0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

.btn-cian:hover {
    background-color: #04c6ed; /* Color base del botón */
}

.btn-orange {
    border-radius: .50rem !important;
    border: 1px solid #faa336;
    color: white;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 10px;
    background-color: #faa336; /* Color base del botón */
    transition: box-shadow 0.3s ease-in-out; /* Transición suave del efecto de sombra */
    width: 100px;
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
    0 2px 2px 0 rgba(0, 0, 0, 0.14),
    0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

.btn-orange:hover {
    background-color: #fa9a21; /* Color base del botón */
}

.btn-red {
    border-radius: .50rem !important;
    border: 1px solid #fa3232;
    color: white;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 10px;
    background-color: #fa3232; /* Color base del botón */
    transition: box-shadow 0.3s ease-in-out; /* Transición suave del efecto de sombra */
    width: 100px;
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
    0 2px 2px 0 rgba(0, 0, 0, 0.14),
    0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

.btn-red:hover {
    background-color: #ea0404; /* Color base del botón */
}


.btn-green {
    border-radius: .50rem !important;
    border: 1px solid #02c51c;
    color: white;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 10px;
    background-color: #02c51c; /* Color base del botón */
    transition: box-shadow 0.3s ease-in-out; /* Transición suave del efecto de sombra */
    width: 100px;
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
    0 2px 2px 0 rgba(0, 0, 0, 0.14),
    0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

.btn-green:hover {
    background-color: #2fdb46; /* Color base del botón */
}


.nav-link {
    text-align : left !important;
    color      : #9ea0a2 !important;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color            : #ffffff  !important;
    background-color : #414244 !important;
}

/* BG LIGHT */
.bg-blue-light {
    background-color: #79addc !important;
    /*border-radius   : 0 0 1rem 1rem!important;*/
    padding-top     : 1rem !important;
    padding-bottom  : 1rem !important;
    height          : 100% !important;
}







.bg-green-light {
    background-color: #d7f0dd !important;
    border-radius   : 0 0 1rem 1rem!important;
    padding-top     : 1rem !important;
    padding-bottom  : 1rem !important;
    height          : 100% !important;
}

.bg-primary-light {
    background-color: #dadcf8 !important;
    border-radius   : 0 0 1rem 1rem!important;
    padding-top     : 1rem !important;
    padding-bottom  : 1rem !important;
    height          : 100% !important;
}






.bg-red-light {
    background-color: #f8d7da !important;
    border-radius   : 0 0 1rem 1rem!important;
    padding-top     : 1rem !important;
    padding-bottom  : 1rem !important;
    height          : 100% !important;
}




.bg-cian-light {
    background-color: #c1f7f1 !important;
    border-radius   : 0 0 1rem 1rem!important;
    padding-top     : 1rem !important;
    padding-bottom  : 1rem !important;
    height          : 100% !important;
}

.bg-grey-light {
    background-color: #f0f0f0 !important;
    border-radius   : 0 0 1rem 1rem!important;
    padding-top     : 1rem !important;
    padding-bottom  : 1rem !important;
    height          : 100% !important;
}

.bg-yellow-light {
    background-color: #fffcba !important;
    border-radius   : 0 0 1rem 1rem!important;
    padding-top     : 1rem !important;
    padding-bottom  : 1rem !important;
    height          : 100% !important;
}