/* Code Snippets
   ========================================================================== */

.snippet {
    position: relative;
    overflow: visible;
}

.snippet code {
    font-size: 14px;
    line-height: 20px;
}

.snippet .btn {
    -webkit-transition: opacity 0.3s ease-in-out;
    -o-transition: opacity 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out;
    opacity: 0;
    padding: 2px 6px;
    position: absolute;
    right: 4px;
    top: 4px;
    background-color: #fff;
    border-radius: 3px;
    z-index: 3;
    box-shadow: 5px 5px 3px lightblue;
}

.snippet:hover .btn,
.snippet .btn:focus {
    opacity: 1;
}

@media screen and (max-width: 768px) {
    .snippet .btn {
        opacity: 1;
    }
}


.tooltipped {
    position:relative
}

.tooltipped:after {
    position:absolute;
    z-index:1000000;
    display:none;
    padding:5px 8px;
    font:normal normal 11px/1.5 Helvetica,arial,nimbussansl,liberationsans,freesans,clean,sans-serif,"Segoe UI Emoji","Segoe UI Symbol";
    color:#fff;
    text-align:center;
    text-decoration:none;
    text-shadow:none;
    text-transform:none;
    letter-spacing:normal;
    word-wrap:break-word;
    white-space:pre;
    pointer-events:none;
    content:attr(aria-label);
    background:rgba(0,0,0,0.8);
    border-radius:3px;
    -webkit-font-smoothing:subpixel-antialiased;
}

.tooltipped:before {
    position:absolute;
    z-index:1000001;
    display:none;
    width:0;
    height:0;
    color:rgba(0,0,0,0.8);
    pointer-events:none;
    content:"";
    border:5px solid transparent;
}

.tooltipped:hover:before,
.tooltipped:hover:after,
.tooltipped:active:before,
.tooltipped:active:after,
.tooltipped:focus:before,
.tooltipped:focus:after {
    display:inline-block;
    text-decoration:none;
}

.tooltipped-s:after,
.tooltipped-se:after,
.tooltipped-sw:after {
    top:100%;
    right:50%;
    margin-top:5px;
}
.tooltipped-s:before,
.tooltipped-se:before,
.tooltipped-sw:before {
    top:auto;
    right:50%;
    bottom:-5px;
    margin-right:-5px;
    border-bottom-color:rgba(0,0,0,0.8)
}
.tooltipped-se:after {
    right:auto;
    left:50%;
    margin-left:-15px;
}
.tooltipped-sw:after {
    margin-right:-15px;
}
.tooltipped-n:after,
.tooltipped-ne:after,
.tooltipped-nw:after {
    right:50%;
    bottom:100%;
    margin-bottom:5px;
}
.tooltipped-n:before,
.tooltipped-ne:before,
.tooltipped-nw:before {
    top:-5px;
    right:50%;
    bottom:auto;
    margin-right:-5px;
    border-top-color:rgba(0,0,0,0.8)
}
.tooltipped-ne:after {
    right:auto;
    left:50%;
    margin-left:-15px
}
.tooltipped-nw:after {
    margin-right:-15px
}
.tooltipped-s:after,
.tooltipped-n:after {
    -webkit-transform:translateX(50%);
    -ms-transform:translateX(50%);
    transform:translateX(50%)
}
.tooltipped-w:after {
    right:100%;
    bottom:50%;
    margin-right:5px;
    -webkit-transform:translateY(50%);
    -ms-transform:translateY(50%);
    transform:translateY(50%)
}
.tooltipped-w:before {
    top:50%;
    bottom:50%;
    left:-5px;
    margin-top:-5px;
    border-left-color:rgba(0,0,0,0.8)
}
.tooltipped-e:after {
    bottom:50%;
    left:100%;
    margin-left:5px;
    -webkit-transform:translateY(50%);
    -ms-transform:translateY(50%);
    transform:translateY(50%)
}
.tooltipped-e:before {
    top:50%;
    right:-5px;
    bottom:50%;
    margin-top:-5px;
    border-right-color:rgba(0,0,0,0.8)
}