/*! * Dropdown V1.0.0 (https://github.com/marcelotomazelli/dropdown) * Copyright 2021-2021 Marcelo Tomazelli * Licensed under MIT (https://github.com/marcelotomazelli/dropdown/blob/main/LICENSE) */
.mt-dropdown{
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative
}
.mt-dropdown-menu{
    z-index:1000;
    display:block;
    visibility:hidden;
    opacity:0;
    position:fixed;
    bottom:200%
}
.mt-dropdown.show .mt-dropdown-menu{
    visibility:visible;
    opacity:1;
    position:absolute;
    transition-property:visibility;
    transition-duration:.3s
}
.mt-dropdown.show .mt-dropdown-menu.mt-dropdown-pt{
    top:unset;
    bottom:calc(100% + .5rem);
    left:unset;
    right:unset
}
.mt-dropdown.show .mt-dropdown-menu.mt-dropdown-pb{
    top:calc(100% + .5rem);
    bottom:unset;
    left:unset;
    right:unset
}
.mt-dropdown.show .mt-dropdown-menu.mt-dropdown-pts{
    top:unset;
    bottom:calc(100% + .5rem);
    left:calc(0% + 0rem);
    right:unset
}
.mt-dropdown.show .mt-dropdown-menu.mt-dropdown-pbs{
    top:calc(100% + .5rem);
    bottom:unset;
    left:calc(0% + 0rem);
    right:unset
}
.mt-dropdown.show .mt-dropdown-menu.mt-dropdown-pte{
    top:unset;
    bottom:calc(100% + .5rem);
    left:unset;
    right:calc(0% + 0rem)
}
.mt-dropdown.show .mt-dropdown-menu.mt-dropdown-pbe{
    top:calc(100% + .5rem);
    bottom:unset;
    left:unset;
    right:calc(0% + 0rem)
}
.mt-dropdown.show .mt-dropdown-menu.mt-dropdown-ps{
    top:unset;
    bottom:unset;
    left:unset;
    right:calc(100% + .5rem)
}
.mt-dropdown.show .mt-dropdown-menu.mt-dropdown-pe{
    top:unset;
    bottom:unset;
    left:calc(100% + .5rem);
    right:unset
}
.mt-dropdown.show .mt-dropdown-menu.mt-dropdown-pst{
    top:calc(0% + 0rem);
    bottom:unset;
    left:unset;
    right:calc(100% + .5rem)
}
.mt-dropdown.show .mt-dropdown-menu.mt-dropdown-pet{
    top:calc(0% + 0rem);
    bottom:unset;
    left:calc(100% + .5rem);
    right:unset
}
.mt-dropdown.show .mt-dropdown-menu.mt-dropdown-psb{
    top:unset;
    bottom:calc(0% + 0rem);
    left:unset;
    right:calc(100% + .5rem)
}
.mt-dropdown.show .mt-dropdown-menu.mt-dropdown-peb{
    top:unset;
    bottom:calc(0% + 0rem);
    left:calc(100% + .5rem);
    right:unset
}
:root{
    --dark:#303030;
    --light:#f8fafc;
    --gray:#5c5c5c
}
*,::after,::before{
    box-sizing:border-box
}
html{
    height:100%
}
:focus{
    outline:0
}
h1,h2,h3,h4,h5,p{
    margin:0;
    padding:0
}
.header{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:1.5rem 0;
    color:var(--dark);
    text-align:left;
    background-color:rgba(0,0,0,.03);
    border-bottom:1px solid rgba(0,0,0,.06)
}
.header-brand{
    margin-right:1.5rem
}
.header-brand-img{
    display:block;
    width:100%;
    min-width:50px;
    max-width:80px
}
.header p{
    color:#3b3b3b;
    font-weight:300
}
.header a{
    display:block;
    color:inherit;
    text-decoration:none;
    transition:opacity .3s
}
.main{
    display:grid;
    min-height:100%;
    position:relative
}
.main-code,.main-dropdown{
    display:flex;
    justify-content:center;
    padding:.75rem
}
.main-code{
    align-items:flex-start;
    width:100%;
    min-width:100%;
    min-width:100%
}
.code{
    max-width:100%;
    overflow-x:auto
}
.dropdown-button{
    cursor:pointer;
    display:block;
    margin:0;
    padding:.5rem;
    color:var(--dark);
    background-color:#dadada;
    border:none;
    border-radius:50px;
    transition-property:background-color,color,box-shadow;
    transition-duration:.3s
}
.dropdown-button i{
    display:flex;
    align-items:center;
    justify-content:center;
    width:10px;
    height:10px;
    font-size:1.3rem
}
.dropdown-button:hover{
    background-color:#cecece
}
.mt-dropdown.show .dropdown-button{
    color:#ececec;
    background-color:var(--dark)
}
.mt-dropdown .mt-dropdown-menu{
    padding:.25rem;
    color:#fff;
    background-color:var(--dark);
    border-radius:.3rem
}
.cd-title{
    width:100%;
    padding:.25rem;
    color:rgba(250,250,250,.5);
    font-size:.6em;
    font-weight:300;
    text-align:center;
    text-transform:uppercase
}
.cd-list{
    display:flex;
    flex-direction:row;
    justify-content:flex-start;
    align-items:center;
    margin:0;
    padding:0;
    list-style-type:none
}
.cd-lists{
    display:flex;
    flex-direction:row
}
.cd-alignment .cd-list{
    order:0;
    overflow:hidden;
    max-width:100px;
    visibility:visible;
    opacity:1;
    transition-property:visibility,opacity,max-width;
    transition-duration:.6s;
    transition-delay:.2s
}
.cd-alignment .cd-list:not(.active){
    order:2;
    max-width:0;
    visibility:hidden;
    opacity:0
}
.cd-item{
    padding:.25rem
}
.cd-btn{
    cursor:pointer;
    display:block;
    width:36px;
    height:36px;
    min-height:36px;
    padding:4px;
    background-color:rgba(250,250,250,.04);
    border-radius:.2rem;
    transition-property:background-color,box-shadow;
    transition-duration:.3s
}
.cd-btn:hover{
    background-color:rgba(250,250,250,.1)
}
.cd-btn.active{
    background-color:rgba(250,250,250,.2);
    transition-delay:.2s
}
[data-cd-change]>span{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    max-width:calc(36px - 4px);
    height:100%;
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center
}
.line{
    color:grey
}
.line,.line *{
    white-space:nowrap
}
.tag{
    color:#ff6188
}
.comment{
    color:#afafaf
}
.attr{
    font-style:italic;
    color:#21adbd
}
.attr-id{
    color:#fc9867
}
.attr-class{
    color:#ebbf3c;
    transition:opacity .1s
}
.attr-value{
    color:#7fb649
}
[data-cd-change="t"]>span{
    background-image:url(icons/top.png)
}
[data-cd-change="e"]>span{
    background-image:url(icons/end.png)
}
[data-cd-change="b"]>span{
    background-image:url(icons/bottom.png)
}
[data-cd-change="s"]>span{
    background-image:url(icons/start.png)
}
[data-cd-change=ts]>span{
    background-image:url(icons/top-start.png)
}
[data-cd-change=te]>span{
    background-image:url(icons/top-end.png)
}
[data-cd-change=bs]>span{
    background-image:url(icons/bottom-start.png)
}
[data-cd-change=be]>span{
    background-image:url(icons/bottom-end.png)
}
[data-cd-change=st]>span{
    background-image:url(icons/start-top.png)
}
[data-cd-change=sb]>span{
    background-image:url(icons/start-bottom.png)
}
[data-cd-change=et]>span{
    background-image:url(icons/end-top.png)
}
[data-cd-change=eb]>span{
    background-image:url(icons/end-bottom.png)
}