/* Copy-To-Clipboard */
pre {
    position: relative;
}
code + .copy-to-clipboard {
    margin-left: -1px;
    border-left: 0 !important;
    font-size: inherit !important;
    vertical-align: middle;
    height: inherit;
    top: 0;
    width: inherit;
}

.tooltipped {
    position: relative;
}
.tooltipped:after {
    position: absolute;
    z-index: 1000000;
    display: none;
    padding: 5px 8px;
    font: normal normal 11px/1.5 "Work Sans", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
    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 {
    transform: translateX(50%);
}
.tooltipped-w:after {
    right: 100%;
    bottom: 50%;
    margin-right: 5px;
    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;
    transform: translateY(50%);
}
.tooltipped-e:before {
    top: 50%;
    right: -5px;
    bottom: 50%;
    margin-top: -5px;
    border-right-color: rgba(0, 0, 0, 0.8);
}


*:not(pre) > code {
    padding:0.5rem;
}
*:not(pre) > code + .copy-to-clipboard {
    width:inherit;
    display:inline;
    padding:0.5rem 0.75rem;
}
*:not(pre) > code + .copy-to-clipboard:after {
    font-size:inherit;
}
.copy-to-clipboard {
    width: 27px;
    height: 1.45rem;
    top: -1px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    /* LIGHT THEME OoooooOOOOH */
    color: #5e5e5e;
    background-color: #CCC;
    /* DARK THEME WOOOOAH */
    /*
    background-color: #4d5257;
    color: #DDD;
    */
    margin-left: -.2rem;
    cursor: pointer;
    border-radius: 0 2px 2px 0;
    margin-bottom: 1px;
    text-align:center;
}
.copy-to-clipboard:after {
    content: "\f0ea";
    font-size: 18px;
    font-family: FontAwesome;
}
pre .copy-to-clipboard {
    position: absolute;
    right: 4px;
    top: 4px;
    border-radius: 2px;
    width:30px;
    height:inherit;
    padding:2px;
}

pre .copy-to-clipboard:hover {
    background-color: #656c72;
    color: #fff;
}

code + .copy-to-clipboard:after {
    font-size:15px;
}
code + .copy-to-clipboard:hover {
    background: #656c72;
    color: #FFF;
}