/* PANTALLAS ------------------------------------------------
 * min-xxl: 1400px;
 * min-xl: 1200px;
 * min-lg: 992px;
 * min-md: 768px;
 * min-sm: 576px;
 * min-ss: 500px;
 * min-xs: 426px;
 * min-xxs: 350px;
 * min-xxxs: 300px;

 * max-xxl: 1399.98px;
 * max-xl: 1199.98px;
 * max-lg: 991.98px;
 * max-md: 767.98px;
 * max-sm: 575.98px;
 * max-ss: 499.98px;
 * max-xs: 425.98px;
 * max-xxs: 349.98px;
 * max-xxxs: 319.98px;
-----------------------------------------------------------*/


/* FONTS --------------------------------------------------*/

@font-face{
    font-family: 'Kanit';
    src: local('Kanit'), url("../assets/fonts/Kanit-Regular.ttf") format("truetype");
    font-display: swap;
}

@font-face{
    font-family: 'Ubuntu';
    src: local('Ubuntu'), url('../assets/fonts/Ubuntu-Regular.ttf') format("truetype");
    font-display: swap;
}

/* VARS --------------------------------------------------*/

:root{

    --window-heigth: 100vh;
    --header-heigth-panel: 60px;
    --header-heigth-basic: 64px;
    --header-heigth-public: 60px;
    --manage-navbar-heigth: 49.2px;
    --manage-table-filter-height: 0px;
    --manage-table-head-height: 41.6px;
    
    --color-menu-back: #051a2b;
    --color-menu-back-dark: #030D15;
    --color-menu-back-toggler: #08253c;
    --color-menu-back-toggler-hover: #08253c;
    --color-menu-text: #f0f1ff;
    --color-menu-text-hover: #37c7f3;
    --color-menu-text-disabled: #ffffff;
    --color-menu-toggler: #ffffff;
    --color-menu-divider: #ffffff;
    --color-menu-border: #ffffff2c;
    --color-menu-dropdown-border: #b2b2b286;
    --color-menu-dropdown-back: #ffffff;
    --color-menu-dropdown-text: #292929c6;
    --color-menu-dropdown-text-hover: #095fb5;
    --color-menu-dropdown-text-disabled: #292929c6;

    --color-menu-rates-back: #f9f9f9;
    --color-menu-rates-active: #f0f0f0;
    --color-menu-rates-text: #292929c6;
    --color-menu-rates-text-hover: #095fb5;
    --color-menu-rates-text-disabled: #292929c6;
    --color-menu-rates-border: #292929c6;

    --color-menu-manage-back: #ffffff;
    --color-menu-manage-text: #292929c6;
    --color-menu-manage-text-hover: #095fb5;
    --color-menu-manage-text-disabled: #292929c6;
    --color-menu-manage-border: #292929c6;

    --color-sidebar-back: #ffffff;
    --color-sidebar-back-hover: #1248741e;
    --color-sidebar-text: #292929c6;
    --color-sidebar-text-hover: #095fb5;
    --color-sidebar-text-disabled: #292929c6;
    --color-sidebar-divider: #292929c6;
    --color-sidebar-border: #292929c6;
    --color-sidebar-scrollbar-track: #F3F3F3; 
    --color-sidebar-scrollbar-thumb: #dedede;
    --color-sidebar-scrollbar-thumb-hover: #c8c8c8;
    
    --color-footer-back: #051a2b; 
    --color-footer-text: #d8d8d8; 
    --color-footer-text-hover: #ffffff; 
    --color-footer-text-title: #37c7f3; 
    --color-footer-divider: #e4e4e4;
    --color-footer-button-back: #d8d8d8;
    --color-footer-button-text: #292929;
    --color-footer-dropdown-back: #ffffff;
    --color-footer-dropdown-text: #292929;
    --color-footer-dropdown-text-hover: #095fb5;
    --color-footer-dropdown-text-disabled: #292929;

    --color-btn-disabled: #dedede; 
    --color-btn-disabled-text: #9f9f9f; 

    --color-btn-custom: #064889; 
    --color-btn-custom-text: #ffffff;
    --color-btn-custom-hover: #064889; 
    --color-btn-custom-active: #064889; 
    --color-btn-custom-shadow-rgba: rgba(6, 72, 137, 0.251);
    --color-btn-custom-shadow-rgb: 6, 72, 137;

    --color-btn-secondary: #ececec; 
    --color-btn-secondary-text: #064889;
    --color-btn-secondary-hover: #e1e1e1; 
    --color-btn-secondary-active: #e1e1e1; 
    --color-btn-secondary-shadow-rgba: rgba(95, 95, 95, 0.25);
    --color-btn-secondary-shadow-rgb: 95, 95, 95;
    
    --color-btn-danger: #dc3545; 
    --color-btn-danger-text: #ffffff;
    --color-btn-danger-hover: #dc3545; 
    --color-btn-danger-active: #dc3545; 
    --color-btn-danger-shadow-rgba: rgba(220, 53, 69, 0.25);
    --color-btn-danger-shadow-rgb: 220,53,69;

    --color-selection-back: #1E496C; 
    --color-selection-text: #ffffff; 
    --color-scrollbar-track: #F3F3F3; 
    --color-scrollbar-thumb: #dedede;
    --color-scrollbar-thumb-hover: #c8c8c8;
    --color-scrollbar-button: #c8c8c8;
    --color-scrollbar-button-hover: #9f9f9f;

    --color-form-group-text: #e5e5eb;
    --color-form-placeholder: #9e9e9e; 
    --color-form-disabled-back: #f0f0f0;
    --color-form-disabled-text: #a2a2a2;
    --color-form-inset-shadow-rgba: rgba(92, 92, 92, 0.101);

    --color-table-back: #ffffff;
    --color-table-head: #e7ecf1;
    --color-table-text: #292929cc; 
    --color-table-border: #9c9c9c;
    --color-table-hover: #d3dff8;
    
    --color-ad-back: #f9f9f9;
    --color-ad-text: #adadad;
    --color-ad-text-bg: #efefef;
    --color-ad-border: #ebebeb;

    --color-back: #ffffff; 
    --color-back-code: #212529;
    --color-back-hover: #f9f9f9;
    --color-back-custom: #ccd8eb;
    --color-back-custom-light: #e5ecf7;
    --color-back-custom-dark: #a3b4ce;

    --color-border: #e8e8e8;
    --color-border-light: #f3f3f3;
    --color-skeleton-back: #eeeeee;
    --color-skeleton-rgba: 256, 256, 256;
    --color-custom-rgb: 6, 72, 137; 
    --color-loader-rgb: 6, 72, 137; 
    --color-loader: #064889; 

    --color-custom: #064889; 
    --color-success: #3ea942;
    --color-warning: #997404;
    --color-danger: #dc3545;
    --color-info: #1263ba;

    --color-light-custom: #cfdef7;
    --color-light-success: #d0ffce;
    --color-light-warning: #fff3cd;
    --color-light-danger: #fed6e0;
    --color-light-info: #D1E6FE;

    --color-light-2-custom: #95b2d4;
    --color-light-2-success: #9bd799;
    --color-light-2-warning: #e0d1a1;
    --color-light-2-danger: #dda2b1;
    --color-light-2-info: #a3bcdb;

    --color-p: #6e6e6e;
    --color-h: #064889;
    --color-a: #0c75dd;
    --color-a-hover: #064889;
    --color-p-code: #dfdfdf;
    --color-p-dark: #292929;
    --color-p-light: #9a9a9a;
    --color-p-message: #382626;

    --gradient-session: 270deg, var(--color-back) 40%, var(--color-custom) 100%;

    --svg-scrollv-decrement: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23c8c8c8'><path d='m7.247 4.86-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z'/></svg>");
    --svg-scrollv-decrement-hover: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%239f9f9f'><path d='m7.247 4.86-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z'/></svg>");
    --svg-scrollv-increment: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23c8c8c8'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>");
    --svg-scrollv-increment-hover: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%239f9f9f'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>");
    
    --svg-scrollh-decrement: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23c8c8c8'><path d='m3.86 8.753 5.482 4.796c.646.566 1.658.106 1.658-.753V3.204a1 1 0 0 0-1.659-.753l-5.48 4.796a1 1 0 0 0 0 1.506z'/></svg>");
    --svg-scrollh-decrement-hover: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%239f9f9f'><path d='m3.86 8.753 5.482 4.796c.646.566 1.658.106 1.658-.753V3.204a1 1 0 0 0-1.659-.753l-5.48 4.796a1 1 0 0 0 0 1.506z'/></svg>");
    --svg-scrollh-increment: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23c8c8c8'><path d='m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z'/></svg>");
    --svg-scrollh-increment-hover: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%239f9f9f'><path d='m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z'/></svg>");

    --svg-accordion-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23868686'><path 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'/></svg>");
    --svg-accordion-icon-active: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%233E8E36'><path 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'/></svg>");
    --svg-accordion-icon-disabled: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ADB2AF'><path 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'/></svg>");
    
    --svg-form-icon-check: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23ffffff' xmlns='http://www.w3.org/2000/svg'><path d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8'/></svg>");
    --svg-form-icon-select: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23292929' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); 
    --svg-form-icon-select-invalid: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    --svg-form-icon-select-disabled: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ADB2AF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");

    --svg-breadcrumb-divider: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%233E8E36'><path d='m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z/></svg>");
}

@media (max-width:991.98px) {
    .expand-md{
        --header-heigth-public: 65.5px;
    }
    .expand-lg{
        --header-heigth-public: 101.1px;
    }
}

@media (max-width:767.98px) {
    .expand-md, .expand-lg {
        --header-heigth-public: 103.4px;
    }
}

@media (max-width:499.98px) {
    :root{
        --manage-navbar-heigth: 50px;
    }
}

@media (max-width:425.98px) {
    :root{
        --manage-navbar-heigth: 55.75px;
    }
    .expand-md, .expand-lg {
        --header-heigth-public: 101.1px;
    }
}

/* GENERAL --------------------------------------------------*/

.desktop ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
    display: auto;
    z-index: 0;
}

.desktop ::-webkit-scrollbar-thumb {
    background: var(--color-scrollbar-thumb);
    border-color: var(--color-scrollbar-track);
    border-width: 1px;
    border-style: solid;
}
.desktop ::-webkit-scrollbar-thumb:hover,
.desktop ::-webkit-scrollbar-thumb:active{
    background: var(--color-scrollbar-thumb-hover);
    box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.05);
}

.desktop ::-webkit-scrollbar-track {
    background: var(--color-scrollbar-track);
}

.desktop ::-webkit-scrollbar-button:single-button {
    background-color: var(--color-scrollbar-track);
    background-position: center center;
    display: block;
    width: 10px;
    height: 10px;
}

.desktop ::-webkit-scrollbar-button:single-button:vertical:decrement {
    background-image: var(--svg-scrollv-decrement);
}
.desktop ::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
    background-image: var(--svg-scrollv-decrement-hover);
}

.desktop ::-webkit-scrollbar-button:single-button:vertical:increment {
    background-image: var(--svg-scrollv-increment);
}
.desktop ::-webkit-scrollbar-button:single-button:vertical:increment:hover {
    background-image: var(--svg-scrollv-increment-hover);
}

.desktop ::-webkit-scrollbar-button:single-button:horizontal:decrement {
    background-image: var(--svg-scrollh-decrement);
}
.desktop ::-webkit-scrollbar-button:single-button:horizontal:decrement:hover {
    background-image: var(--svg-scrollh-decrement-hover);
}

.desktop ::-webkit-scrollbar-button:single-button:horizontal:increment {
    background-image: var(--svg-scrollh-increment);
}
.desktop ::-webkit-scrollbar-button:single-button:horizontal:increment:hover {
    background-image: var(--svg-scrollh-increment-hover);
}

/*-----------------------*/

::selection {
    text-shadow: none;
    background: var(--color-selection-back);
    color: var(--color-selection-text);
}

#content {
    overflow: hidden;
}

body{
    overflow: hidden;
    font: monospace;
    font-family: 'Ubuntu', arial, sans-serif !important;
}

main a{
    color: var(--color-a);
    transition:all .3s;
    text-decoration: none;
}
main a:hover, 
main a:focus, 
main a:active{
    color: var(--color-a-hover);
    text-decoration: underline;
}

main a[role="button"]{
    text-decoration: none;
}
main a[role="button"].custom-btn{
    color: var(--color-btn-custom-text);
}
main a[role="button"].custom-secondary-btn{
    color: var(--color-btn-secondary-text);
}

main p{
    color: var(--color-p);
    line-height: 25px;
}
main ul, ol{
    color: var(--color-p);
    padding-left: 1.5rem;
}
main li{
    margin-bottom: 5px;
}

main h1{
    color: var(--color-h);
    font-weight: bold;
}
main h2, 
main h3, 
main h4, 
main h5,
main h6{
    color: var(--color-h);
    font-weight: 500;
}

main b, 
main strong, 
main .fw-bold{
    font-weight: bold;
}

main table tbody{
    color: var(--color-p);
}
main table thead{
    color: var(--color-p-dark);
}

/*-----------------------*/

.full-height {
    height: 100%;
}

.divider{
    width: 100%;
    height: .5px;
    margin-top: 16px;
    margin-bottom: 16px;
    background-color: var(--color-border);
 }

 .scrollable {
    overflow-x: hidden;
    overflow-y: auto;
    height: 100%;
    width: 100%;
}

.padding-top.panel-site{
    padding-top: var(--header-heigth-panel) !important;
}
.padding-top.basic-site{
    padding-top: var(--header-heigth-basic) !important;
}
.padding-top.public-site{
    padding-top: var(--header-heigth-public) !important;
}

.bg-code {
    background-color: var(--color-back-code) !important;
}
.bg-custom {
    background-color: var(--color-back-custom) !important;
}
.bg-hover {
    background-color: var(--color-back-hover) !important;
}
.bg-custom-dark {
    background-color: var(--color-back-custom-dark) !important;
}
.bg-custom-light {
    background-color: var(--color-back-custom-light) !important;
}
.border-custom {
    border-color: var(--color-custom) !important;
}

.custom-text{
    color: var(--color-custom) !important;
    opacity: 1;
}
.custom-text-link{
    color: var(--color-a) !important;
}
.custom-text-code{
    color: var(--color-p-code) !important;
}
.custom-text-success{
    color: var(--color-success) !important;
}
.custom-text-danger{
    color: var(--color-danger) !important;
}
.custom-text-normal{
    color: var(--color-p) !important;
}
.custom-text-dark{
    color: var(--color-p-dark) !important;
}
.custom-text-light{
    color: var(--color-p-light) !important;
    opacity: 1;
}
.custom-text-message{
    color: var(--color-p-message) !important;
    opacity: 1;
}
.custom-text-number{
    font-family: 'Kanit', arial, sans-serif !important;
    letter-spacing: 0.5px;
}
.fw-condensed{
    font-stretch: condensed !important;
}
.fw-expanded{
    font-stretch: expanded !important;
}
.text-justify{
    text-align: justify;
}

.panel-site .height-content {
    height: calc(100vh - var(--header-heigth-panel));
}
.basic-site .height-content {
    height: calc(100vh - var(--header-heigth-basic));
}
.public-site .height-content {
    height: calc(100vh - var(--header-heigth-public));
}

/*-----------------------*/

.w-10{width: 10%}
.w-20{width: 20%}
.w-30{width: 30%}
.w-40{width: 40%}
.w-50{width: 50%}
.w-60{width: 60%}
.w-70{width: 70%}
.w-80{width: 80%}
.w-90{width: 90%}
.w-100{width: 100%}

.px10{width:10px; min-width:10px; max-width:10px;}
.px20{width:20px; min-width:20px; max-width:20px;}
.px30{width:30px; min-width:30px; max-width:30px;}
.px40{width:40px; min-width:40px; max-width:40px;}
.px50{width:50px; min-width:50px; max-width:50px;}
.px60{width:60px; min-width:60px; max-width:60px;}
.px70{width:70px; min-width:70px; max-width:70px;}
.px80{width:80px; min-width:80px; max-width:80px;}
.px90{width:90px; min-width:90px; max-width:90px;}
.px100{width:100px; min-width:100px; max-width:100px;}
.px110{width:110px; min-width:110px; max-width:110px;}
.px120{width:120px; min-width:120px; max-width:120px;}
.px130{width:130px; min-width:130px; max-width:130px;}
.px140{width:140px; min-width:140px; max-width:140px;}
.px150{width:150px; min-width:150px; max-width:150px;}
.px160{width:160px; min-width:160px; max-width:160px;}
.px170{width:170px; min-width:170px; max-width:170px;}
.px180{width:180px; min-width:180px; max-width:180px;}
.px190{width:190px; min-width:190px; max-width:190px;}
.px200{width:200px; min-width:200px; max-width:200px;}
.px250{width:250px; min-width:250px; max-width:250px;}
.px300{width:300px; min-width:300px; max-width:300px;}
.px350{width:350px; min-width:350px; max-width:350px;}
.px400{width:400px; min-width:400px; max-width:400px;}

.min10{min-width:10px;}
.min20{min-width:20px;}
.min30{min-width:30px;}
.min40{min-width:40px;}
.min50{min-width:50px;}
.min60{min-width:60px;}
.min70{min-width:70px;}
.min80{min-width:80px;}
.min90{min-width:90px;}
.min100{min-width:100px;}
.min110{min-width:110px;}
.min120{min-width:120px;}
.min130{min-width:130px;}
.min140{min-width:140px;}
.min150{min-width:150px;}
.min160{min-width:160px;}
.min170{min-width:170px;}
.min180{min-width:180px;}
.min190{min-width:190px;}
.min200{min-width:200px;}
.min250{min-width:250px;}
.min300{min-width:300px;}
.min350{min-width:350px;}
.min400{min-width:400px;}

.max10{max-width:10px;}
.max20{max-width:20px;}
.max30{max-width:30px;}
.max40{max-width:40px;}
.max50{max-width:50px;}
.max60{max-width:60px;}
.max70{max-width:70px;}
.max80{max-width:80px;}
.max90{max-width:90px;}
.max100{max-width:100px;}
.max110{max-width:110px;}
.max120{max-width:120px;}
.max130{max-width:130px;}
.max140{max-width:140px;}
.max150{max-width:150px;}
.max160{max-width:160px;}
.max170{max-width:170px;}
.max180{max-width:180px;}
.max190{max-width:190px;}
.max200{max-width:200px;}
.max250{max-width:250px;}
.max300{max-width:300px;}
.max350{max-width:350px;}
.max400{max-width:400px;}

/* LOADER ---------------------------------------------------*/

.loader {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    animation: animate-loader 1s linear infinite;
    background: linear-gradient(
        0deg, 
        rgba(var(--color-loader-rgb), 0.2) 33%, 
        var(--color-loader) 100%
    );
}
.loader::after,
.loader::before {
    content: '';  
    width: calc(100% - 6px);
    height: calc(100% - 6px);
    border-radius: 50%;
    background: var(--color-back);
    box-sizing: border-box;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
  
@keyframes animate-loader {
    0% { transform: rotate(0deg) }
    100% { transform: rotate(360deg)}
}

/* SKELETON --------------------------------------------------*/

.skeleton {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: var(--color-skeleton-back);
    background: linear-gradient(
        90deg,
        rgba(var(--color-skeleton-rgba), 0.0) 35%,
        rgba(var(--color-skeleton-rgba), 0.5) 50%,
        rgba(var(--color-skeleton-rgba), 0.0) 65%
    ) var(--color-skeleton-back);
    background-size: 200% 100%;
    background-position-x: 180%;
    animation: 1.25s animate-skeleton ease-in-out infinite;
    animation-delay: .06s;
    transition: background-color .5s;
}

@keyframes animate-skeleton {
    to {
      background-position-x: -20%;
    }
}

/* ALERTS ---------------------------------------------------*/

.custom-alert {
    color: var(--color-p-message);
    background-color: var(--color-back-hover);
    border: solid 1px var(--color-border);
    min-height: 200px;
    padding: 30px;
}

/* BADGETS ---------------------------------------------------*/

.badge.text-bg-success{
    background-color: var(--color-success) !important;
}

.badge.text-bg-danger{
    background-color: var(--color-danger) !important;
}

/* BREADCRUMB ---------------------------------------------------*/

.breadcrumb{
    padding: 0 3px;
    margin: 12px 0 0;
    font-size: 12px;
}

.breadcrumb-item.active{
    color: var(--color-p);
}

.breadcrumb-item+.breadcrumb-item{
    padding-left: 4px;
}
.breadcrumb-item+.breadcrumb-item::before{
    line-height: 120%;
    padding-right: 3px;
    font-family: 'bootstrap-icons' !important;
    color: var(--color-p-light);
    content: "\F135";
    font-size: 15px;
}

/* CARDS --------------------------------------------------*/

:root{--custom-card-lines: 4}

@media (max-width:1399.98px) {
    :root{--custom-card-lines: 5}
}

@media (max-width:1199.98px) {
    :root{--custom-card-lines: 3}
}

@media (max-width:991.98px) {
    :root{--custom-card-lines: 4}
}

@media (max-width:767.98px) {
    :root{--custom-card-lines: 4}
}

@media (max-width:624.98px) {
    :root{--custom-card-lines: 5}
}

/*--------------------------------*/

.custom-card{
    margin-top: 0;
    margin-bottom: 28px;
}

.custom-card .card-img{
    background-color: var(--color-back-hover);
}
.custom-card .card-img::after{
    z-index: 100;
    font-family: 'bootstrap-icons' !important;
    color: var(--color-p-light);
    display: inline-block;
    content: "\F226";
    font-size: 60px;
    position: absolute;
    translate: -50% -50%;
    left: 50%;
    top: 50%;
}
.custom-card .card-img img{
    z-index: 200;
    width: 100%;
    height: 100%;
    object-fit: cover;
    color: var(--color-p);
}

.custom-card .card-body{
    overflow: hidden;
    min-height: calc(110.6px + var(--custom-card-lines) * 25px);
    max-height: calc(110.6px + var(--custom-card-lines) * 25px);
}

.custom-card .card-text{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    line-clamp: var(--custom-card-lines) ; 
    -webkit-line-clamp: var(--custom-card-lines) ;
    -webkit-box-orient: vertical;
}

.custom-card a.btn{
    text-decoration: none;
}

@media (max-width:575.98px) {
    .custom-card{
        border-radius: 0;
        border-top: none;
        border-left: none;
        border-right: none;
        margin-top: 16px;
        margin-bottom: 0;
    }

    .custom-card .card-body{
        min-height: 0;
        max-height: none;
        padding-left: 0;
        padding-right: 0;
    }

    .custom-card .card-text{
        line-clamp: unset; 
        -webkit-line-clamp: unset;
    }
}

/* ACCORDION --------------------------------------------------*/

.custom-accordion {
    --bs-accordion-color: var(--color-p);
    --bs-accordion-bg: var(--color-back);
    --bs-accordion-border-color: var(--color-border);
    --bs-accordion-btn-color: var(--color-p);
    --bs-accordion-btn-bg: var(--color-back);
    --bs-accordion-btn-focus-border-color: var(--color-custom);
    --bs-accordion-btn-focus-box-shadow: none;
    --bs-accordion-active-color: var(--color-custom);
    --bs-accordion-active-bg: var(--color-light-custom);
    --bs-accordion-btn-icon: var(--svg-accordion-icon);
    --bs-accordion-btn-active-icon: var(--svg-accordion-icon-active);
}

.custom-accordion .accordion-header button:not(.collapsed){
    font-size: 102%;
    font-weight: bold;
    transition: all .4s;
    letter-spacing: .2px;
}

/* BUTTONS --------------------------------------------------*/

.custom-btn-sm {
    --bs-btn-padding-y: .5rem; 
    --bs-btn-padding-x: .5rem; 
    --bs-btn-font-size: .76rem;
    line-height: 1rem;
    min-width: 3.5rem;
}

.custom-btn{
    --bs-btn-color: var(--color-btn-custom-text);
    --bs-btn-bg: var(--color-btn-custom);
    --bs-btn-border-color:var(--color-btn-custom);
    --bs-btn-hover-color: var(--color-btn-custom-text);
    --bs-btn-hover-bg: var(--color-btn-custom-hover);
    --bs-btn-hover-border-color: var(--color-btn-custom-hover);
    --bs-btn-focus-shadow-rgb: var(--color-btn-custom-shadow-rgb);
    --bs-btn-active-color: var(--color-btn-custom-text);
    --bs-btn-active-bg: var(--color-btn-custom-active);
    --bs-btn-active-border-color: var(--color-btn-custom-active);
    --bs-btn-active-shadow: inset 0 3px 5px var(--color-btn-custom-shadow-rgba);
    --bs-btn-disabled-color: var(--color-btn-disabled-text);
    --bs-btn-disabled-bg: var(--color-btn-disabled);
    --bs-btn-disabled-border-color: var(--color-btn-disabled);
}

.custom-secondary-btn{
    --bs-btn-color: var(--color-btn-secondary-text);
    --bs-btn-bg: var(--color-btn-secondary);
    --bs-btn-border-color:var(--color-btn-secondary);
    --bs-btn-hover-color: var(--color-btn-secondary-text);
    --bs-btn-hover-bg: var(--color-btn-secondary-hover);
    --bs-btn-hover-border-color: var(--color-btn-secondary-hover);
    --bs-btn-focus-shadow-rgb: var(--color-btn-secondary-shadow-rgb);
    --bs-btn-active-color: var(--color-btn-secondary-text);
    --bs-btn-active-bg: var(--color-btn-secondary-active);
    --bs-btn-active-border-color: var(--color-btn-secondary-active);
    --bs-btn-active-shadow: inset 0 3px 5px var(--color-btn-secondary-shadow-rgba);
    --bs-btn-disabled-color: var(--color-btn-disabled-text);
    --bs-btn-disabled-bg: var(--color-btn-disabled);
    --bs-btn-disabled-border-color: var(--color-btn-disabled);
}

.custom-outline-btn{
    --bs-btn-color: var(--color-btn-custom);
    --bs-btn-border-color: var(--color-btn-custom);
    --bs-btn-hover-color: var(--color-btn-custom-text);
    --bs-btn-hover-bg: var(--color-btn-custom-hover);
    --bs-btn-hover-border-color: var(--color-btn-custom-hover);
    --bs-btn-focus-shadow-rgb: var(--color-btn-custom-shadow-rgb);
    --bs-btn-active-color: var(--color-btn-custom-text);
    --bs-btn-active-bg: var(--color-btn-custom-hover);
    --bs-btn-active-border-color: var(--color-btn-custom-hover);
    --bs-btn-active-shadow: inset 0 3px 5px var(--color-btn-custom-shadow-rgba);
    --bs-btn-disabled-color: var(--color-btn-disabled-text);
    --bs-btn-disabled-bg: var(--color-btn-disabled);
    --bs-btn-disabled-border-color: var(--color-btn-disabled);
    --bs-gradient: none;
}

/*---------------------------*/

.btn-calculator-invert{
    transition: all .3s;
    position: absolute;
    height: 56px;
    width: 100%;
    left: 0;
    top: 0;
}

.btn-calculator-invert div{
    cursor: pointer;
    border-radius: 50%;
    color: var(--color-btn-custom-text);
    background-color: var(--color-btn-custom);
    transform: translate(-50%, -50%);
    position: absolute;
    align-items: center;
    justify-content: center;
    display: flex;
    height: 40px;
    width: 40px;
    left: 50%;
    top: 50%;
}
.btn-calculator-invert div.disabled{
    color: var(--color-btn-disabled-text);
    background-color: var(--color-btn-disabled);
}

.btn-calculator-invert svg{
    transition: transform .3s;
}

@media (max-width:575.98px) {
    .btn-calculator-invert{
        position: relative;
        display: block;
        height: 40px;
    }

    .btn-calculator-invert svg{
        transform: rotate(90deg);
    }
}

/* TOASTS --------------------------------------------------*/

.toast-container{
    padding: 12px;
}

.custom-toast{
    opacity: 1;
}
.custom-toast.danger{
    background-color: var(--color-light-danger);
    border-color: var(--color-danger);
}
.custom-toast.info{
    background-color: var(--color-light-info);
    border-color: var(--color-info);
}
.custom-toast.success{
    background-color: var(--color-light-success);
    border-color: var(--color-success);
}
.custom-toast.warning{
    background-color: var(--color-light-warning);
    border-color: var(--color-warning);
}

.custom-toast.danger .toast-header{
    color: var(--color-danger);
}
.custom-toast.info .toast-header{
    color: var(--color-info);
}
.custom-toast.success .toast-header{
    color: var(--color-success);
}
.custom-toast.warning .toast-header{
    color: var(--color-warning);
}
.custom-toast .toast-body{
    color: var(--color-p-dark);
}

.custom-toast .toast-header .title .bi::before{
    font-size: 1.25rem;
    padding-right: 8px;
    vertical-align: -.25em;
}
.custom-toast.danger .toast-header .title .bi::before{
    content: "\F622";
}
.custom-toast.info .toast-header .title .bi::before{
    content: "\F430";
}
.custom-toast.success .toast-header .title .bi::before{
    content: "\F26A";
}
.custom-toast.warning .toast-header .title .bi::before{
    content: "\F332";
}

@media (max-width:425.98px) {
    .toast-container{
        padding: 6px;
    }

    .custom-toast{
        --bs-toast-max-width: 100vw;
    }
}

/* /////////////////////////////////////////////////////// */
/*  ADS ////////////////////////////////////////////////// */
/* /////////////////////////////////////////////////////// */

.ad.display {
    width: 100%;
    display: flex;
    position: relative;
    min-height: 280px;
    height: 280px;
    text-align: center;
    align-items: center;
    justify-content: center;
    background: var(--color-ad-back);
    border: 1px solid var(--color-ad-border);
    border-right: none;
    border-left: none;
    border-radius: 0;
    overflow: hidden;
}

.ad.display.display-middle {
    border-right: 1px solid var(--color-ad-border);
    border-left: 1px solid var(--color-ad-border);
    border-radius: 5px;
}

.ad.display::before {
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    background-color: var(--color-ad-text-bg);
    color: var(--color-ad-text);
    letter-spacing: 2px;
    border-radius: 3px;
    line-height: 100%;
    font-size: 10px;
    padding: 5px 6px 6px 8px;
    content: "AD";
}

.ad.display .adsbygoogle {
    width: 100%;
}

[lang="es"] .ad.display::before {
    content: "ANUNCIO" !important;
}

@media (max-width:487px) {
    .ad.display {
        min-height: 100vw;
        height: 100vw;
    }
}

/* /////////////////////////////////////////////////////// */
/*  FOOTER /////////////////////////////////////////////// */
/* /////////////////////////////////////////////////////// */

footer{
    background: var(--color-footer-back);
    color: var(--color-footer-text);
    font-size: 13px;
}

footer p{
    color: var(--color-footer-text);
    margin-bottom: 6px;
    line-height: 20px;
    opacity: 0.9;
}

footer a{
    text-decoration: none;
    color: var(--color-footer-text);
    transition: all 0.3s;
}
footer a:hover,
footer a:hover,
footer a:focus{
    text-decoration: underline;
    color: var(--color-footer-text-hover);
}

footer .divider{
    width: 100%;
    height: 0.5px;
    background-color: var(--color-footer-divider);
    opacity: 0.1;
    margin: 15px 0px;
}

footer .logo img{
    width: auto;
    height: auto;
    max-width: 130%;
    max-height: 28px;
    transition: all .3s;
}

footer .social .icon a{
    color: var(--color-footer-text);
    font-size: 22px;
}

footer .social .icon{
    opacity: 0.6;
    width: 36px;
    height: 32px;
    padding: 5px 7px;
    transition: all 0.2s;
    display: inline-block;
}

footer .social .icon:hover,
footer .social .icon:focus{
    opacity: 1;
}

footer .links .title{
    color: var(--color-footer-text-title);
    margin-bottom: 4px;
    font-size: 15px;
}

footer .links a{
    display: block;
}

footer .message p{
    font-size: 12px;
    line-height: 16px;
    letter-spacing: .5px;
    text-align: justify;
}

@media (max-width:991.98px) {
    footer .logo img{
        max-width: 100%;
    }
}

@media (max-width:575.98px) {
    footer .divider{
        margin: 10px 0px;
    }
    footer .links .title.mt{
        margin-top: 18px;
    }
}

/* DROPDOWN ----------------------------------------------*/

footer .dropdown-toggle,
footer .dropdown-toggle:hover,
footer .dropdown-toggle:focus,
footer .dropdown-toggle:active{
    font-size: 13px;
    color: var(--color-footer-button-text);
    background-color: var(--color-footer-button-back);
}

footer .dropdown-toggle .btn-image img{
    width: 16px;
    height: 16px;
    margin-right: 5px;
    margin-bottom: 1.5px;
}

footer .dropdown-menu{
    background-color: var(--color-menu-dropdown-back);
    box-shadow: 0px 0px 4px black;
    border: none;
}

footer .dropdown-menu .dropdown-item{
    color: var(--color-footer-dropdown-text);
    background-color: transparent;
    text-decoration: none;
    padding: 7px 16px 7px 16px;
    font-size: 13px;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
}
footer .dropdown-menu .dropdown-item:focus,
footer .dropdown-menu .dropdown-item:hover,
footer .dropdown-menu .dropdown-item:active{
    color: var(--color-footer-dropdown-text-hover);
}
footer .dropdown-menu .dropdown-item:disabled,
footer .dropdown-menu .dropdown-item.disabled{
    color: var(--color-footer-dropdown-text-disabled);
    opacity: .4;
}

footer .dropdown-menu .item-image img{
    width: 16px;
    height: 16px;
    margin-right: 5px;
    margin-bottom: 1.5px;
}
footer .dropdown-menu .disabled .item-image img{
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}

/* /////////////////////////////////////////////////////// */
/*  MODAL CODE /////////////////////////////////////////// */
/* /////////////////////////////////////////////////////// */

.modal.modal-code .modal-dialog{
    width: 400px;
}

.modal.modal-code .input,
.modal.modal-code .button{
    width: 200px;
    max-width: 200px;
    transition: width .5s;
}

@media (max-width:575.98px) {
    .modal.modal-code .modal-dialog{
        width: 100%;
    }
    .modal.modal-code .text{
        max-width: 350px;
    }
    .modal.modal-code .input,
    .modal.modal-code .button{
        width: 100%;
    }
}

/* /////////////////////////////////////////////////////// */
/*  MODAL LOADING //////////////////////////////////////// */
/* /////////////////////////////////////////////////////// */

.dialog.loading{
    position: fixed;
    z-index: 10000;
    left: 0px;
    right: 0px;
    bottom: 0px;
    top: 0px;
}

.dialog.loading .background{
    position: absolute;
    z-index: 10100;
    width: 100%;
    height: 100%;
    opacity: 0.9;
    background-color: var(--color-back);
}

.dialog.loading .body{
    position: absolute;
    z-index: 10200;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dialog.loading .body img{
    width: 60px;
    height: 60px;
}

.dialog.loading .body .circle{
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-back);
    border-radius: 43px;
}

.dialog.loading .body .spinner-border{
    position: absolute;
    width: 70px; 
    height: 70px;
    color: var(--color-custom);
}


/* /////////////////////////////////////////////////////// */
/*  API VIEW ///////////////////////////////////////////// */
/* /////////////////////////////////////////////////////// */

.api-view .api-view-header{
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url("../assets/svg/web/world-map.svg");
}

.api-view .api-view-header .logo{
    max-width: 85%;
    width: 320px;
    height: auto;
}

@media(max-width:767.98px) {
    .api-view .api-view-header{
        background-size: 140%;
        background-position: center 80%;
    }

    .api-view .api-view-header .logo{
        padding: 1.5rem;
    }
}

@media(max-width:575.98px) {
    .api-view .api-view-header{
        background-size: 160%;
        background-position: center 80%;
    }
}

@media(max-width:425.98px) {
    .api-view .api-view-header{
        background-size: 200%;
        background-position: center 70vw;
    }
}

/*---------------------------------*/

.api-view.pricing .card-pricing .text-small{
    font-size: 85%;
}

.api-view.pricing .card-pricing ul{
    margin: 0;
    padding-left: 20px;
    list-style-type: none;
}
.api-view.pricing .card-pricing ul li{
    line-height: 1.25;
}
.api-view.pricing .card-pricing ul li::before {
    font-family: 'bootstrap-icons' !important;
    position: absolute;
    margin-left: -20px;
}
.api-view.pricing .card-pricing ul li.true::before {
    content: "\F633";
    color: var(--color-success);
}
.api-view.pricing .card-pricing ul li.false::before {
    content: "\F659";
    color: var(--color-danger);
}

.api-view.pricing .form-switch{
    margin: 0;
    padding: 0 5px;
    display: flex;
    align-items: center;
    font-size: 150%;
}
.api-view.pricing .form-check-input{
    cursor: pointer;
    margin-left: 0;
    margin: 0;
}

.api-view.pricing .form-check-input:checked {
    background-color: var(--color-custom);
    border-color: var(--color-custom);
}

.api-view.pricing .card-pricing .recommended{
    position: relative;
    background-color: var(--color-back-custom-light);
    border-color: var(--color-custom) !important;
    --color-border: var(--color-back-custom);
}
.api-view.pricing .card-pricing .recommended p, 
.api-view.pricing .card-pricing .recommended ul {
    color: var(--color-p-dark);
}
.api-view.pricing .card-pricing .recommended-label{
    position: absolute;
    top: 0;
    left: 50%;
    font-size: 70%;
    line-height: 100%;
    border-radius: 32px;
    letter-spacing: 0.5px;
    padding: 5px 10px 7px 10px;
    transform: translate(-50%, -50%);
    color: var(--color-btn-custom-text);
    background-color: var(--color-btn-custom);
}

@media(max-width:767.98px) {
    .api-view.pricing .card-pricing .text-small{
        font-size: 90%;
    }

    .api-view.pricing .card-pricing ul{
        padding-left: 24px;
    }
    .api-view.pricing .card-pricing ul li::before {
        margin-left: -24px;
    }
}

/* /////////////////////////////////////////////////////// */
/*  MESSAGE VIEW ///////////////////////////////////////// */
/* /////////////////////////////////////////////////////// */

.message-view{
    position: relative;
    width: 100%;
}
.panel-site .message-view{
    height: calc( var(--window-heigth) - var(--header-heigth-panel) );
}
.basic-site .message-view{
    height: calc( var(--window-heigth) - var(--header-heigth-basic) );
}
.public-site .message-view{
    height: calc( var(--window-heigth) - var(--header-heigth-public) );
}

.message-view .text-view,
.message-view .image-view{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: absolute;
    width: 100%;
    left: 0;
}

.message-view .text-view{
    padding-left: 16px;
    padding-right: 16px;
    text-align: center;
}
.message-view .text-view p{
    text-align: center;
}

.message-view .image-view img{
    max-width: 100%;
    max-height: 100%;
}

/* /////////////////////////////////////////////////////// */
/*  MANAGE VIEW ////////////////////////////////////////// */
/* /////////////////////////////////////////////////////// */

.manage-view {
    position: relative;
    height: calc(var(--window-heigth) - var(--header-heigth-panel));
    width: 100%;
    padding: 0;
    margin: 0;
}

.manage-view .tab-content{
    padding-top: var(--manage-navbar-heigth);
    max-height: calc(var(--window-heigth) - var(--header-heigth-panel));
}
.manage-view .tab-content .table-responsive{
    max-height: calc(var(--window-heigth) - var(--header-heigth-panel) - var(--manage-navbar-heigth) - var(--manage-table-filter-height) - 1px);
}

/* RESPONSE --------------------------------------------------*/

.manage-view .response{
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(var(--window-heigth) - var(--header-heigth-panel) - var(--manage-navbar-heigth));
    padding-top: calc(var(--manage-table-filter-height) + var(--manage-table-head-height));
    transition: opacity .5s;
    width: 100%;
    opacity: 0;
    left: 0;
    top: var(--manage-navbar-heigth);
}

/* LOADING --------------------------------------------------*/

.manage-view .response .loading{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: var(--color-custom);
}

.manage-view .response .loading .text{
    letter-spacing: 1px;
    margin-top: 12px;
    font-weight: bold;
}

/* ERROR --------------------------------------------------*/

.manage-view .response .error{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: absolute;
    color: var(--color-custom);
}

.manage-view .response .error .icon{
    width: 140px;
    height: 140px;
    padding: 20px;
}
.manage-view .response .error svg{
    width: 100%;
    height: 100%;
}

.manage-view .response .error .text{
    letter-spacing: 1px;
    padding: 0 16px;
}

.manage-view .response .empty{
    color: var(--color-p-light);
}
.manage-view .response .empty .icon{
    opacity: 0.25;
}
.manage-view .response .empty .text{
    opacity: 0.50;
}
  
.manage-view .response .data .icon{
    color: var(--color-danger);
}
.manage-view .response .data .text{
    color: var(--color-p);
}