.hide {
    display: none !important;
}
.copyToClipboard {
    cursor: copy;
}
.copyToClipboard:hover {
    background-color: rgba(128, 128, 128, 0.2);
}

.copyToClipboardFlashSuccess {
    animation-name: copyToClipboardFlashSuccess;
    animation-timing-function: ease-out;
    animation-duration: 1s;
    -webkit-animation-name: copyToClipboardFlashSuccess;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-duration: 1s;
}
.copyToClipboardFlashError {
    animation-name: copyToClipboardFlashError;
    animation-timing-function: ease-out;
    animation-duration: 1s;
    -webkit-animation-name: copyToClipboardFlashError;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-duration: 1s;
}

@-webkit-keyframes copyToClipboardFlashSuccess {
    from { background: green; }
    to  { background: none; }
}
@keyframes copyToClipboardFlashSuccess {
    0% { background: green; }
    100% { background: none; }
}

@-webkit-keyframes copyToClipboardFlashError {
    from { background: red; }
    to  { background: none; }
}
@keyframes copyToClipboardFlashError {
    0% { background: red; }
    100% { background: none; }
}

.verticalThisThatSeparator {
    position: relative;
}
.verticalThisThatSeparator:before {
    content: "\f0ec";
    font-family: 'Font Awesome 5 Free', 'FontAwesome';
    position: absolute;
    top: 0;
    right: -5px;
}
.verticalThisThatSeparator:after {
    content: "";
    position: absolute;
    top: 0;
    right: 1px;
    width: 5px;
    height: 100%;
    background-image: linear-gradient(black 33%, rgba(255,255,255,0) 0%);
    background-position: right;
    background-size: 1px 26px;
    background-repeat: repeat-y;
}