:root {
    --primaryColor: #144375;
    --primaryColorHover: #0b2541;
    --softPrimaryColor: #c1deff;
    --secondaryColor: #F7A072;
    --softSecondaryColor: #EEE;
    --accentColor: #faf0e6;
    --primaryColorContrast: white;
    --primaryColorContrastHover: white;
    --secondaryColorContrast: white;
    --secondaryColorContrastHover: white;
    --secondaryColorHover: #e78550;

/* Darkmode */
    --softPrimaryColorDarkmode: #34090B;

}

.custom-bg-primary-color {
    background-color: var(--primaryColor)!important;
}

.custom-bg-secondary-color {
    background-color: var(--secondaryColor)!important;
}

.custom-bg-soft-primary-color {
    background-color: var(--softPrimaryColor)!important;
}

.custom-bg-soft-secondary-color {
    background-color: var(--softSecondaryColor)!important;
}

.custom-primary-color-contrast {
    color: var(--primaryColorContrast)!important;
}
.custom-primary-color-contrast-hover:hover {
    color: var(--primaryColorContrastHover)!important;
}
.custom-bg-primary-color-hover:hover {
    background-color: var(--primaryColorHover)!important;
}
.custom-secondary-color-contrast {
    color: var(--secondaryColorContrast)!important;
}
.custom-bg-secondary-color-hover:hover {
    background-color: var(--secondaryColorHover)!important;
}
.custom-fill-secondary-color-contrast {
    fill: var(--secondaryColorContrast)!important;
}
.custom-fill-secondary-color-contrast-hover:hover {
    fill:  var(--secondaryColorContrastHover)!important;
}
.nav-tabs .custom-tab-nav-border {
    border-color: #86868630!important
}

[data-red] {
    color: red;
}

/* Ajusta el color cuando esta en Darkmode */ 
body.darkmode-body .custom-bg-soft-primary-color {
    background-color: var(--softPrimaryColorDarkmode)!important;
}

/*    ___        ______   ______   ______   .______       _______   __    ______   .__   __.     _______    ______     ______      _______.
     /   \      /      | /      | /  __  \  |   _  \     |       \ |  |  /  __  \  |  \ |  |    |       \  /  __  \   /      |    /       |
    /  ^  \    |  ,----'|  ,----'|  |  |  | |  |_)  |    |  .--.  ||  | |  |  |  | |   \|  |    |  .--.  ||  |  |  | |  ,----'   |   (----`
   /  /_\  \   |  |     |  |     |  |  |  | |      /     |  |  |  ||  | |  |  |  | |  . `  |    |  |  |  ||  |  |  | |  |         \   \    
  /  _____  \  |  `----.|  `----.|  `--'  | |  |\  \----.|  '--'  ||  | |  `--'  | |  |\   |    |  '--'  ||  `--'  | |  `----..----)   |   
 /__/     \__\  \______| \______| \______/  | _| `._____||_______/ |__|  \______/  |__| \__|    |_______/  \______/   \______||_______/                                                                                                                                            
  */

.accordion {
    width: 100%;
    /* max-width: 384px; */
    /* margin: 30px auto 20px; */
    background: #FFF;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 0px;
    padding: 0;
}

.accordion li {
    list-style: none;
}

.accordion .link {
    cursor: pointer;
    display: block;
    padding: 15px 15px 15px 42px;
    color: #4D4D4D;
    font-size: 14px;
    font-weight: 700;
    border-bottom: 1px solid #CCC;
    position: relative;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease
}

.accordion li:last-child .link {
    border-bottom: 0
}

.accordion li i {
    position: absolute;
    top: 16px;
    left: 12px;
    font-size: 18px;
    color: #595959;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease
}

.accordion li i.fa-chevron-down {
    right: 12px;
    left: auto;
    font-size: 16px
}

.accordion li.open .link {
    color: #ff6316
}

.accordion li.open i {
    color: #ff6316
}

.accordion li.open i.fa-chevron-down {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg)
}

.submenu {
    display: none;
    /* background: #808080; */
    font-size: 14px;
    padding: 0;
}

.submenu li {
    list-style: none;
}

.submenu a {
    border-bottom: 1px solid #CCC!important;
    display: block;
    text-decoration: none;
    color: #d9d9d9;
    padding: 6px 12px 6px 3.5em;
    -webkit-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease
}

.submenu a:hover {
    background: rgba(255, 99, 22, 0.25);
    color: #808080!important;
}

/* =============================================================================================== */
.doc-json-box-format {
    background-color: #EEE; 
    padding: 5px 10px; 
    border: 1px solid rgba(0, 0, 0, 0.125); 
    border-radius: 0.25rem;
}

.doc-url-format {
    background-color: #DDD; 
    padding: 5px 10px; 
    font-size: 24px;
}
.doc-menu-active {
    background: rgba(255, 99, 22, 0.25);
}