/*Variables*/
:root {
    --primary-color:#335c67;
    --secondary-color: #9e2a2b;
    --accent-color:#e09f3e;
    --primary-color-text:#000000;
    --secondary-color-text:#353533;

    --height-header: 56px;
}

@media (min-width: 1200px) {
    :root {
        --height-header: 70px;
    }
}

body {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
}

html {
    scroll-behavior: smooth;
}

.primary-color {
    color: var(--primary-color);
}

.secondary-color {
    color: var(--secondary-color);
}

.accent-color {
    color: var(--accent-color);
}

.primary-color-text {
    color: var(--primary-color-text);
}

.secondary-color-text {
    color: var(--secondary-color-text);
}

.background-example-color1 {
    background-color: #d7ecf1;
}

.background-example-color1-dark {
    background-color: #a9cad3;
}

.background-example-color2 {
    background-color: #f4e5d0;
}

.background-example-color2-dark {
    background-color: #f5d7ae;
}

/*header*/
.header {
    box-shadow: var(--nkn-box-shadow);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    z-index: 2025;
    width: 100%;
    height: var(--height-header);
    padding: .5rem;
}

.header .nkn-dropdown .nkn-dropdown-content {
    top: 39px;
}

@media (max-width: 767px) {
    .header .nkn-dropdown .nkn-dropdown-toggle .nkn-icon-toggle {
        display: none;
    }
}

/*Layout Page*/
/*sidebar*/
.sidebar {
    background-color: #fbfbfb;
    border: 0.1px solid #ededed;
    display: none;
}

.sidebar > ul,
.sidebar  li > ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.sidebar ul li {
    margin: 1rem;
}

.sidebar ul li a {
    width: calc(100% - 20px);
    display: inline-block;
}

.sidebar > ul > li:before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 7px;
    margin-bottom: 3px;
    border-radius: 50%;
    background-color: #979797;
}

.sidebar ul li.active a,
.sidebar  li > ul > li.active a {
    color: var(--accent-color);
    font-weight: 500;
}

.sidebar > ul > li.active:before,
.sidebar  li > ul > li.active:before {
    background-color: var(--accent-color);
}

.sidebar  li > ul {
    margin-left: .5rem;
}

.sidebar li > ul > li:before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    margin-right: 10px;
    margin-bottom: 5px;
    background-color: #fbfbfb;
}

/*body*/
.body-doc {
    padding-top: var(--height-header); 
}

.main {
    margin-bottom: 3rem;
}

/*section*/
.section {
    margin-top: 2rem;
}

/*subsection*/
.subsection {
    margin-top: 1.5rem;
}

@media (max-width: 767px) {
    .subsection ol,
    .subsection ul {
        padding-left: 1rem;
    }
}
.subsection figure{
    margin: 0;
}

.more-things .title-doc-3 {
    margin-top: 3rem;
}

@media (min-width: 768px) {
    .main {
        margin: .5rem .5rem 3rem .5rem;
    }
    .section {
        margin-top: 4rem;
    }

    .body-section {
        margin-left: 1rem;
    }
    
    .subsection {
        margin-top: 3rem;
    }
}

@media (max-width: 991px) {
    .logo a:first-child img {
        width: 80px;
    }
    .logo a:last-child img {
        display: none;
    }
    .sidebar.open {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        top: var(--height-header);
        bottom: 0;
        z-index: 100;
        height: calc(100vh - var(--height-header) - 2rem);
        overflow-y: auto;
    }
    /*con esto me aseguro que el overflow del contenido 
    se esconda y asi no haya doble overflow cuando se abre el sidebar*/
    aside.sidebar.open + main.main {
        height: calc(100vh - var(--height-header) - 2rem);
        overflow-y: hidden;
    }
    .body-doc {
        overflow-y: auto;
    }
}

@media (min-width: 992px) {
    /*layout page*/
    .logo a:first-child img {
        display: none;
    }
    .logo a:last-child img {        
        width: 190px;
    }
    .body-doc {
        display: flex;
        justify-content: space-between;
    }
    .main {
        margin: 1rem 1rem 3rem 1rem;
        width: calc(100% - 264px - 5rem);
    }
    .toggle-sidebar {
        display: none;
    }
    .sidebar {
        display: block;
        height: calc(100vh - var(--height-header) - 5rem);        
        position: sticky;
        top: calc(var(--height-header) + 2rem);
        overflow-y: auto;
        width: 264px;
        margin-bottom: 1rem;
    }
    /*End layout page*/
}

@media (min-width: 1200px) {
    /*layout page*/
    .logo a:last-child img {        
        width: 250px;
    }
    .main {
        margin: 3rem;
    }
}
/*End layout page*/

/*Titles Styles*/
h1,h2,h3,h4,h5 {
    font-family: 'Nunito', sans-serif;
}
.title-doc-1 {
    font-style: normal;
    font-weight: bold;
    font-size: 27px;
    line-height: 64.2%;
    position: relative;
    text-align: center;
    color:var(--primary-color);
    margin-top: 2rem;
}
.title-doc-2 {
    color: var(--secondary-color);
    position: relative;
}
.title-doc-1:after,
.title-doc-2:after {
    content: "";
    display: inline-block;
    width: 50px;
    border-bottom: 5px solid var(--accent-color);  
    position: absolute;
    
}
.title-doc-1:after {
    bottom: -18px;
    left: 44%;
    text-align: center;
    top: 1.75rem;
}
.title-doc-2:after {
    bottom: -10px;
    left: 0;
    top: 1.75rem;
}
.title-doc-3 {
    color: var(--primary-color-text);
    position: relative;
}
.title-doc-3:before{
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 10px;
    border-radius: 7.5px;
    background-color: var(--accent-color);
}
/*Images and figures styles*/
.img {
    width: 100%;
}

/*Example img*/
.example-img{
    width: 100%;
}
.example-figcaption{
    color: var(--nkn-curtain-color);
    font-style: italic;
    text-align: center;
    font-size: 12px;
    margin-top: 1rem;
}
/*editor HTML*/
.button-editor {
    display: inline-flex;
}
/*Unkuna primordial name enhancement styles*/
.name-class{
    color: var(--primary-color);
    font-weight: 700;
    font-family: monospace;
    background-color: #efefef;
    border: 0.1px solid #dddddd;
    padding: 0 5px;
    border-radius: 6px;
}
.tag{
    font-family: monospace;
    color: var(--secondary-color);
    background-color: #efefef;
    padding: 0 5px;
    letter-spacing: -1px;
    border-radius: 6px;
}
.snippet {
    background-color: #efefef;
    display: inline-block;
    border: 0.1px solid #dddddd;
    padding: 0 5px;
    border-radius: 6px;
}
.attribute {
    color: var(--primary-color);
}
.attribute-value {
    color: orange;
}
.backgroun-attribute {
    font-weight: 600;
    font-family: monospace;
    background-color: #efefef;
    border: 0.1px solid #dddddd;
    padding: 0 5px;
    border-radius: 6px;
}
/*footer*/
.footer{
    background-color: #292626;
    padding: .65rem 0;
    font-size: 11px;
    color: #ffffff;
    letter-spacing: .08rem;

    position: fixed;
    width: 100%;
    bottom: 0;
    z-index: 2025;
}
.footer a{
    color: #ffcb7d;
}

/*Styles for text display*/
.strong {
    color: var(--primary-color-text);
    font-weight: 600;
}

.code{
    font-family: monospace;
    font-weight: 500;
    color:#1d1d1d;
}
.tag .prefix{
    color: var(--secondary-color);
}
.class{
    color: #3491df;
}
.prefix{
    color: #ffaa0e;
}
.number{
    color: #20bc20;
}
.link{
    color: #0645ad;
    font-style: italic;
    font-weight: 500;
}
.link:hover, .link:focus {
    text-decoration: underline;
}

/*List styles*/
section p, section li{
    line-height: 1.5rem;
}
ul.letter-list li::marker{
    font-weight: bold;
}
ul.letter-list {
    list-style-type: lower-alpha;
}

/*Examples styles*/
.example {
    border: 1px solid #f5f5f5;
    padding: 1rem;
    border-radius: .2rem;
    background-color: #fbfbfb;
}

.example .nkn-container {
    background-color: #d7ecf1;
    border: 1px solid #c2dee5;
    height: 5rem;
}
.grid .example [class*="nkn-col-"]:nth-child(2n+1) {
    background-color: #d7ecf1;
    border: 1px solid #c2dee5;
}
.grid .example [class*="nkn-col-"]:nth-child(2n+0) {
    background-color: #f4e5d0;
    border: 1px solid #f8dab1;
}
.grid .img-grilla {
    width: 100%;    
}
.grid figure {
    margin: 0;
}

/*accordion*/
.example .nkn-accordion-item, .example .nkn-button {
    background-color: white;
}
.accordion .example .nkn-accordion-heading {
    color: #3491df;
    font-weight: 500;
    background-color: #efefef;
}
/*form*/
.form .example form {
    background-color: white;
    border: 1px solid #f2f2f2;
    padding: .5rem;
    border-radius: .4rem;
}

/*hamburger-menu*/
.hamburger-menu .example {
    position: relative;
    height: 200px;
}
.hamburger-menu .example header h3{ 
    background: linear-gradient(90deg, rgba(158,42,43,1) 15%, rgba(224,159,62,1) 50%, rgba(51,92,103,1) 85%);
    -webkit-background-clip: text;
     color: transparent;
     font-weight: bold;
}

/*modal*/
.modal .example button[data-nkn-role="open-modal"], 
.modal .example button[id]{
    background-color: #d3eef6;
    border: 1px solid #38616d;
    color: #38616d;
    font-weight: bold;
}

/*navbar*/
.navbar .example .nkn-navbar {
    background-color: #fff;
}
.navbar .example .nkn-navbar img {
    width: 70px;
}
.navbar .example .nkn-navbar .nkn-brand {
    font-weight: 700;
    background: linear-gradient(90deg, rgba(158,42,43,1) 15%, rgba(224,159,62,1) 50%, rgba(51,92,103,1) 85%);
    -webkit-background-clip: text;
    color: transparent;
}

/*table*/
td[rowspan]{
    border-right: 1px solid #d7caca;
}

/*spacing*/
.example.spacing .nkn-row {
    border: 1px solid grey;
}
.example.spacing .nkn-row > .nkn-col-s3 {
    height: 100px;
    background-color: #d7ecf1;
}
.spacing .example {
    background-color: #d7ecf1;
    border: solid 1px #c5e1e8;
    padding: 0;
}
.spacing .example [class*="nkn-m-"] {
    background-color: #a9cad3;
}
.spacing .example.padding {
    background-color: #f5d7ae;
    border: solid 1px #dbba8b;
}
.spacing .example.padding [class*="nkn-p-"] div {
    background-color: #f4e5d0;
}
/*style for icons*/
@media (max-width: 767px) {
    .flex-direction {
        flex-direction: column;
    }
}

/*Index page*/
.bg-image{
    background-image: url(../../local-assets/images/bg/bg1.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.mask{
    width: 100%;
    margin-top: var(--height-header);
    height: calc(100vh - var(--height-header) - 34px);
    background-color: rgba(255, 255, 255, 0.65);
    overflow-y: auto;
}
.mask .logo{
    width: 365px;
}

@media (max-width: 767px) {
    .mask .logo{
        width: 320px;
    }   
}
.mask .description{
    font-size: 20px;
    line-height: 2.2rem;
}
.mask .features{
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: white;
    margin: auto;
}
.features.f1{
    border: 3px solid var(--secondary-color);
}
.features.f2{
    border: 3px solid var(--accent-color);
}
.features.f3{
    border: 3px solid var(--primary-color);
}
.features .icon{
    margin-top: 20%;
    width: 36px;
    height: 36px;
}
.features.f1 .icon{
    fill: var(--secondary-color);
}
.features.f2 .icon{
    fill: var(--accent-color);
}
.features.f3 .icon{
    fill: var(--primary-color);
}
.primary-button{
    background-color: var(--primary-color);
    color: white;
    border:none;
    font-weight: 500;
    width: 180px;
}
.primary-button svg{
    fill: white;
}
.primary-light-button{
    background-color: #7fb7c54d;
    border: none;
    color: var(--primary-color);
    font-weight: 500;
    width: 180px;
}
.primary-light-button svg{
    fill: var(--primary-color);
}

/*End Index page*/

/*about us*/
.about-us {
    font-size: 20px;
    line-height: 2.2rem;
}
.about-us .title-doc-1:after {
    left: 45%;
}
@media (min-width: 992px) {
    .about-us .title-doc-1:after {
        left: 48%;
    }
}
.foto {
    width: 150px;
    border-radius: 100%;
}

@media (min-width: 992px) {
    .foto {
        width: 180px;
        border-radius: 100%;
    }
}
/*Codemirror*/
.CodeMirror {
    height: auto ;
}

/*Sobrescribiendo algunas propiedades de unkuna*/
/*Icons width y height*/
.nkn-icon {
    width: 16px;
    height: 16px;
}


/*style for Example trys*/
/* .trys .nkn-brand img {
    width: 70px;
} */